React受控绑定

受控绑定

概念:使用React组件的状态(useState)控制表单的状态

简单理解为双向绑定

jsx 复制代码
function App(){
  const [value, setValue] = useState('')
  return (
    <input 
      type="text" 
      value={value} 
      onChange={e => setValue(e.target.value)}
    />
  )
}

非受控绑定

概念:通过获取DOM的方式获取表单的输入数据,就是获取dom对象

  1. 使用useRef创建 ref 对象,并与 JSX 绑定
    const inputRef = useRef(null),通过ref属性绑定
  2. 在DOM可用时,通过 inputRef.current 拿到 DOM 对象
    inputRef.current
jsx 复制代码
function App(){
  const inputRef = useRef(null)

  const onChange = ()=>{
    console.log(inputRef.current.value)
  }
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  )
}
相关推荐
shellvon13 分钟前
前端攻防:揭秘 Chrome DevTools 与反调试的博弈
前端·逆向
β添砖java18 分钟前
案例二:登高千古第一绝句
前端·javascript·css
却尘18 分钟前
Server Actions 深度剖析:这就是个披着 React 外衣的 RPC
前端·rpc·next.js
南雨北斗42 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪42 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss1 小时前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海1 小时前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手1 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪1 小时前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪1 小时前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端