React表单提交后调用HandleClear函数无法清空表单字段问题求助

问题原因 #

你的表单所有元素均为非受控组件，仅通过onChange事件收集表单值存入state，但没有将元素的展示属性和state绑定，因此state清空后不会同步更新DOM的展示内容。

额外注意：你的手机号输入框重复定义了name属性，保留name="PhoneNumber"即可，删除多余的name="phone"，避免值收集异常。

修复步骤 #

1. 给文本类输入、下拉选择框绑定value属性 #

// 用户名输入框
<input type="text" className="form-control" placeholder='UserName' name="UserName" onChange={handleChnage} value={data.UserName} />

// 手机号输入框
<input className="form-control" placeholder='PhoneNumber' name="PhoneNumber" onChange={handleChnage} value={data.PhoneNumber} />

// 邮箱输入框
<input type="email" className="form-control" placeholder='EmailAddress' id="exampleInputEmail1" aria-describedby="emailHelp" name="email" onChange={handleChnage} value={data.email} />

// 下拉选择框，注意默认选项要加value=""和清空后的state对应
<select className="form-select" aria-label="Default select example" name="dropDown" onChange={handleChnage} value={data.dropDown}>
  <option value="">Select From Dropdown</option>
  <option value="ReactJS">ReactJS</option>
  <option value="JavaScript">JavaScript</option>
  <option value="HtmlCss">HtmlCss</option>
</select>

2. 给单选框绑定checked属性 #

// 男单选框
<input className="form-check-input" type="radio" name="gender" id="male" value="male" onChange={handleChnage} checked={data.gender === 'male'} />

// 女单选框
<input className="form-check-input" type="radio" name="gender" id="female" value="female" onChange={handleChnage} checked={data.gender === 'female'} />

// 其他单选框
<input className="form-check-input" type="radio" name="gender" id="others" value="others" onChange={handleChnage} checked={data.gender === 'others'} />

3. 给复选框绑定checked属性 #

// Javascript复选框
<input className="form-check-input" type="checkbox" name="checking"  value="Javascript" onChange={handleChnage} checked={data.checking.includes('Javascript')} />

// React JS复选框
<input className="form-check-input" type="checkbox" name="checking" value="React JS" onChange={handleChnage} checked={data.checking.includes('React JS')} />

// HTML复选框
<input className="form-check-input" type="checkbox" name="checking"  value="HTML" onChange={handleChnage} checked={data.checking.includes('HTML')} />

// CSS复选框
<input className="form-check-input" type="checkbox" name="checking"  value="CSS" onChange={handleChnage} checked={data.checking.includes('CSS')} />

可选优化 #

如果你的dispatch(allActions.createData(data))是异步接口请求，建议将handleClear()放到请求成功的回调里执行，避免接口请求还没完成就清空了表单数据：

const handleSubmit = async (e) => {
  e.preventDefault();
  await dispatch(allActions.createData(data));
  handleClear();
}

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