ReactJS中提交表单后如何重置input输入框？附问题复现代码

你当前的输入框属于非受控组件：只通过onChange事件在用户输入时同步更新task状态，但没有给输入框绑定value属性关联task状态，输入框的实际显示内容由浏览器DOM自身维护，和React状态没有建立双向绑定关系。所以即使你把task重置为空字符串，DOM里留存的输入内容也不会自动同步更新。

给input标签添加value={task}属性，将其改为标准的React受控组件即可。修改后的input代码如下：

<input 
  type='text'
  placeholder='Wut you upto?'
  value={task}
  onChange = {(event) => {setTask(event.target.value)}}
/>

修改后，task状态和输入框显示值会完全同步，调用setTask('')时输入框会自动清空，和状态保持一致。

小提示：React中所有需要通过代码控制值的表单元素（input、textarea、select等），都建议通过绑定value属性+onChange更新state的方式写成受控组件，避免状态和UI显示不一致的问题。

内容的提问来源于stack exchange，提问作者Mustafa Younus