React点击清除搜索按钮后输入框内容无法清空问题求助

问题原因 #

你使用的Material UI InputBase 组件当前为不受控组件：仅通过onChange事件监听输入变更同步到searchTerm状态，但没有将组件的value属性绑定到searchTerm状态，因此状态更新后无法反向同步到输入框的显示内容。

修复方案 #

修改App.js中InputBase组件的代码，补充value属性绑定即可：

<InputBase
  placeholder="Search..."
  classes={{
    root: classes.inputRoot,
    input: classes.inputInput,
  }}
  value={searchTerm} // 新增该行，将输入框值与状态绑定
  onChange={getSearchTerm}
/>

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