React受控绑定

受控绑定

概念：使用React组件的状态（useState）控制表单的状态
简单理解为双向绑定

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

function App(){
  const inputRef = useRef(null)

  const onChange = ()=>{
    console.log(inputRef.current.value)
  }
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  )
}