受控组件/非受控组件

受控组件（Controlled Component）：表单的值由 React state 控制
非受控组件（Uncontrolled Component）：表单的值由 DOM 自己控制，React 只是“读”它

 

# 受控组件
const [value, setValue] = useState('');

return (
  <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
);
# React 的 state 是 唯一数据源
# 输入框的值 = value，任何变化都由 onChange 更新 state

# 非受控组件
const inputRef = useRef();

return (
  <input ref={inputRef} />
);
# React 不保存输入框的值
# 你想获取输入框的值，需要手动读取：
# console.log(inputRef.current.value);

建议使用受控组件：

1.更容易管理多个字段（集中在 state）

2.做表单校验、条件渲染更方便

3.有更好的可预测性 & 可测试性

 

除了file

对于file类型的表单控件，它是一个特殊的组件，因为它的值只能由用户通过文件选择操作来设置，而不能通过程序直接设置。这使得它在React中的处理方式与其他表单元素有所不同。

强行设置成受控组件会报错

import React, { useRef } from 'react';
const App: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null)
  const handleChange = () => {
    console.log(inputRef.current?.files)
  }
  return (
    <>
      <input type="file" ref={inputRef} onChange={handleChange} />
    </>
  );
}

export default App;