使用事件傳播時反應警告“您在沒有 `onChange` 處理程序的情況下向表單字段提供了 `value` 道具...”

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>

我收到這些警告：

警告：您在沒有onChange處理程序的情況下為表單字段提供了value prop。 這將呈現一個只讀字段。 如果該字段應該是可變的，請使用defaultValue 。 否則，設置onChange或readOnly 。

我應該忽略它們嗎？

Answer 1

從技術上講，您的代碼沒有任何問題。 那么是的，您可以放心地忽略日志。

但是，事件委托不是處理表單狀態的“反應方式”，因此您將無法擺脫這些警告。

恕我直言，這不是一個很好的開發體驗，因此您可以在每個字段中添加一個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，所以它會生成此警報。