一. 受控表单

以select选择为例，这里我们需要使用state去控制dom的状态，集中放在state去管理

function App() {
  const [state,setState] = useState('grapefruit')
  const handleSubmit = (e)=>{
    e.preventDefault();
    console.log(state);
  }
  return (
    <div>
      <form  onSubmit={(e)=>handleSubmit(e)}>
        <label>
          <select value={state} onChange={(e)=>{setState(e.target.value)}}>
            <option value="grapefruit" >葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    </div>
  )
}

二. 非受控表单

非受控的数据集中放在dom管理，取值来说依然遵循dom操作的原则

function App() {
  const data = useRef()
  const handleSubmit = (e)=>{
    e.preventDefault();
    const selectedIndex = data.current.selectedIndex
    console.log(data.current[selectedIndex].value);
  }
  return (
    <div>
      <form  onSubmit={(e)=>handleSubmit(e)}>
        <label >
          <select defaultValue={'lime'} ref={data}>
            <option value="grapefruit" >葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    </div>
  )
}

三. 对比

参考

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/