使用事件传播时的反应警告"You provided a `value` prop to a form field without an `onChange` handler..."

Question

一个例子：

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} />
<input type="text" name="surname" placeholder="surname" value={user.surname} />
</form>
</div>
);
}
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

我收到这些警告：

警告：您为表单字段提供了value道具，但没有onChange处理程序。这将呈现只读字段。如果字段 应该是可变使用defaultValue。否则，请设置任一onChange或readOnly.

我应该忽略它们吗？

Answer 1

从技术上讲，你的代码没有错。那么是的，您可以安全地忽略日志。

但是，事件委托不是处理表单状态的"React 方式"，因此您将无法摆脱这些警告。

恕我直言，这不是一个好的开发体验，因此您可以为每个字段添加一个onChange={handleChange}，而不是在表单上设置onChange。我想 React 事件系统已经过足够优化，不必进行事件委派，即使在您的用例中它非常方便和优雅。

Answer 2

您的 OnChange 需要位于输入中而不是表单中，下面是一个示例：

<input type="text" name="name" placeholder="name" value={user.name} onChange={handleChangeName}/>
<input type="text" name="surname" placeholder="surname" value={user.surname} onChange={handleChangeSurName}/>

这是名称的句柄更改

const handleChangeName = (e) => {
setUser(userInfo => {...userInfo, ['name']: e.target.value})
}

由于输入中没有 onChange，因此会生成此警报。