React 中的受控和非受控组件

受控组件

当表单控件的状态和 react 中的 state 关联起来并且只能通过 setState()来更新，渲染表单的 react 组件还控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做受控组件。

const App: React.FC = () => {
  const [state, setState] = useState('')
  return (
    <>
      <p>你输入的值：{state}</p>
      <input
        type="text"
        value={state}
        onChange={(e) => setState(e.target.value)}
      />
    </>
  )
}

非受控组件

非受控组件就是表单的控件的状态还是存在于 dom 中，react 通过 ref 获取表单控件的 dom 元素来间接地获取控件的 value 值。

const App: React.FC = () => {
  const inputRef = useRef < HTMLInputElement > null

  const handleClick = () => {
    console.log('你输入的值：' + inputRef.current?.value)
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>点击</button>
    </>
  )
}

总结

• React 中的组件分为受控组件和非受控组件
• 受控组件的两个要点：
  • 组件的 value 属性与 React 中的状态绑定
  • 组件内声明了 onChange 事件处理 value 的变化
• 非受控组件更像是传统的 HTML 表单元素，数据存储在 DOM 中，而不是组件内部，获取数据的方式是通过 ref 引用