导航

🔥 受控组件

定义
- 表单元素的值完全由 React state 控制，组件本身不保存状态。

数据流方向只有一个

React state → 表单 value → onChange → setState → React state

function ControlledInput() {
  const [value, setValue] = React.useState('');

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

发生了什么？

value 决定 input 显示什么
用户输入 → onChange
setValue 更新 state
重新 render → input value 更新

input 自己不“记值”

多个表单的受控写法

function Form() {
  const [form, setForm] = React.useState({
    username: '',
    password: '',
  });

  return (
    <>
      <input
        value={form.username}
        onChange={(e) =>
          setForm({ ...form, username: e.target.value })
        }
      />
      <input
        type="password"
        value={form.password}
        onChange={(e) =>
          setForm({ ...form, password: e.target.value })
        }
      />
    </>
  );
}

非受控组件

定义
- 表单的值由 DOM 自己管理，React 只在需要时读取。
React 不关心输入过程，只在“用到时”拿结果

方法一

元素上直接 ref="xxxRef"
JS 中通过 this.refs.xxxRef 访问
- 获取值通过 this.refs.xxxRef.value

方法二（hooks）

xxxRef = React.useRef()
元素上 ref={ xxxRef }
通过 xxxRef.current.value 获取值

function UncontrolledInput() {
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    console.log(inputRef.current?.value);
  };

  return (
    <>
      <input ref={inputRef} defaultValue="hello" />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

🔥 受控组件

发生了什么？

多个表单的受控写法

非受控组件

方法一

方法二（hooks）

如何选择

✅ 优先用受控组件

✅ 非受控更合适