ReactJS中如何清空受控输入？提交登录表单时清空操作未生效

你提交后清空输入框的操作不生效，本质是输入框没有和对应的React状态完成双向绑定：

• 你已经在onChange事件中把输入值同步到了email、password两个state中
• 但没有把state的值绑定到FormInput组件的value属性上，输入框实际上没有被React接管值的显示逻辑
  此时哪怕你在submit回调里把state重置为空，React也不会主动修改DOM输入框上已经存在的用户输入内容，自然看不到清空效果。

只需要给两个FormInput组件追加对应的value绑定即可，原有提交逻辑不需要改动：

1. 邮箱输入框部分，从

   <FormInput type="email" required onChange={handleEmailChange} />
   

   修改为

   <FormInput type="email" required value={email} onChange={handleEmailChange} />
   

2. 密码输入框部分，从

   <FormInput
     type="password"
     required
     onChange={handlePasswordChange}
   />
   

   修改为

   <FormInput
     type="password"
     required
     value={password}
     onChange={handlePasswordChange}
   />
   

补充说明：styled-components封装的FormInput组件默认会透传所有原生input的标准属性，直接传入value属性即可让组件内部把值同步给底层的原生input标签，不需要修改SigninElements.js里的组件定义。

• 非受控场景的备用方案（不推荐）：如果不想维护完整的受控表单状态，可以通过useRef拿到输入框的DOM引用，在提交回调中直接将DOM节点的value置空实现清空，但这种方式会脱离React的状态管理体系，后续做表单校验、联动开发时会增加维护成本，优先推荐上述的受控绑定实现。

内容的提问来源于stack exchange，提问作者Ashan Glenn