受控组件&非受控组件

受控组件

• 受控组件进行了数据双向绑定
• 适用于需要精确控制表单输入的场景: 如立即报错

export default function App() {
  const [v, setV] = useState("");

  const tap = () => {
    console.log(v);
  };

  return (
    <div className="App">
      <input type="text" value={v} onChange={(e) => setV(e.target.value)} />
      <button onClick={tap}>提交</button>
    </div>
  );
}

非受控组件

• 非受控组件的优点是简单易用
• 适用于简单的表单，或者当表单处理逻辑相对简单，不需要精确控制表单输入时。
• 不适用于立即报错, 需要用户点击提交按钮后, 获取到数据才能检查报错

export default function App() {
  const dom = useRef<HTMLInputElement>(null);

  const tap = () => {
    console.log(dom.current?.value);
  };

  return (
    <div className="App">
      <input type="text" ref={dom} />
      <button onClick={tap}>提交</button>
    </div>
  );
}

• 上传文件适合使用非受控组件
• 当需要对具体DOM元素进行操作时，例如上传文件或访问原生方法等，非受控组件更加灵活

export default function App() {
  const dom = useRef<HTMLInputElement>(null);

  const tap = () => {
    if (!dom.current) return alert("请选择文件");
    const files = dom.current.files;
    if (files) alert(`开始上传${files[0].name}`);
  };

  return (
    <div className="App">
      <input type="file" ref={dom} />
      <button onClick={tap}>提交</button>
    </div>
  );
}