如何使用React State清除Material UI Select组件的选中筛选条件

问题原因 #

Material UI的Select组件分为受控模式和非受控模式：

• 非受控模式用defaultValue指定初始值，后续值不受state控制，所以你修改state里的selectYesNo不会触发组件更新
• 受控模式需要用value属性绑定state，值会跟随state同步更新，和你已经正常使用的TextField逻辑一致

解决方案 #

把Select组件的defaultValue属性替换为value即可，修改后的代码如下：

<Select
  labelId="selPrintedLabel"
  id="selPrinted"
  label="Printed"
  fullWidth={true}
  variant="outlined"
  // 把defaultValue改成value实现受控绑定
  value={this.state.selectYesNo}
  onChange={e => this.setState({ selectYesNo: typeof e.target.value === 'string' ? e.target.value : '' })}
>
  {/* 建议补充一个值为空的默认选项，避免清空时出现值不匹配的警告 */}
  <MenuItem value="">未选择</MenuItem>
  {/* 其余原有选项保持不变 */}
</Select>

额外注意事项 #

如果你的Select选项列表里没有值为""的选项，清空state后控制台可能会报「值不存在于可选列表中」的警告，按照上面的示例补充一个值为空的默认MenuItem即可解决。

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