使用事件委托时出现React警告：表单字段未绑定onChange处理函数

绝对不建议忽略这个警告，原因如下：

React的受控组件规则明确要求：如果给表单元素设置了value属性，必须同时给该元素绑定onChange处理函数，否则React会默认判定这是一个只读字段并抛出警告。虽然你通过事件委托在父级form上绑定了onChange，功能上能正常运行，但React的静态检查只会校验当前元素的属性，无法识别父级的事件委托逻辑，所以依然会触发警告。

忽略警告存在隐患：开发环境的警告是React帮你排查潜在问题的提示，长期忽略可能让你错过其他真正的代码逻辑漏洞；而且虽然生产环境不会显示警告，但这种不符合React规范的写法，后续维护时可能会让其他开发者产生误解。

推荐的解决方法有两种：

方法一：给每个input添加onChange绑定 #

虽然用了事件委托，但可以给每个input元素绑定同一个处理函数，让React识别这是受控可编辑字段：

function App() {
  const [user, setUser] = React.useState({
    name: '',
    surname: ''
  });
  const handleChange = e => {
    setUser(prev => ({...prev, [e.target.name]: e.target.value}));
  };
  return (
    <div className="App">
      <form>
        <input 
          type="text" 
          name="name" 
          placeholder="name" 
          value={user.name} 
          onChange={handleChange} 
        />
        <input 
          type="text" 
          name="surname" 
          placeholder="surname" 
          value={user.surname} 
          onChange={handleChange} 
        />
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

方法二：添加readOnly={false}明确声明可编辑 #

如果坚持只在form上绑定事件委托，可以给每个input添加readOnly={false}，明确告诉React该字段是可编辑的，从而消除警告：

function App() {
  const [user, setUser] = React.useState({
    name: '',
    surname: ''
  });
  const handleChange = e => {
    setUser(prev => ({...prev, [e.target.name]: e.target.value}));
  };
  return (
    <div className="App">
      <form onChange={handleChange}>
        <input 
          type="text" 
          name="name" 
          placeholder="name" 
          value={user.name} 
          readOnly={false}
        />
        <input 
          type="text" 
          name="surname" 
          placeholder="surname" 
          value={user.surname} 
          readOnly={false}
        />
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

内容的提问来源于stack exchange，提问作者Tun Huang