react的受控组件和非受控组件

受控组件

需要react的state驱动，如<input>、 <textarea> 和 <select>，需要绑定value、绑定onChange事件修改state达到更新的目的：

  let [count, setCount] = useState(1);
  const changeCount = (e) => {
    setCount(e.target.value);
  };
 // html
<input type="text" value={count} onChange={changeCount} />

缺点：

• 一旦表单组件多起来，就需要写好多onChange事件去更新state，代码会很臃肿

解决方式

• 官方推荐使用formik
• 使用非受控组件替换

非受控组件

• 使用ref，默认值使用defaultValue而不是 value

    const getCount = () => {
       console.log(count.value);
     };
   let [count, setCount] = useState(1);
   
   // html  箭头函数部分是 React.createRef()的缩写
   <input defaultValue="1" type="text" ref={(e) => (count = e)} />