React提交表单后如何将下拉选择框重置为初始默认值Other

问题原因 #

你给sport下拉框用了defaultValue属性，这属于React非受控组件的用法：defaultValue仅会在组件首次渲染时生效，后续无论你怎么修改state里的sport值，都不会同步更新下拉框的选中状态，所以重置逻辑不生效。而你其他输入框都绑定了value属性和state，属于受控组件，修改state就会同步更新视图，所以重置是正常的。

修复方法 #

找到下拉框的代码，把defaultValue="Other"改成value={this.state.sport}即可，修改后的select代码如下：

<select
  name="sport"
  className="input"
  id="sport"
  value={this.state.sport}
  onChange={this.handleChange}
>
  {/* 保留原有所有option选项即可 */}
</select>

修改后下拉框就变成受控组件，和其他输入框逻辑一致，你提交后setState把sport设置为"Other"时，下拉框就会自动切换到对应选项。

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