reactjs - 无法使用 Material UI 选择组件重置选择

Question

第一篇关于 React 的文章！我是新手，我尝试制作一个级联下拉菜单（3 个级别），每个下拉菜单都具有相同的值（相同的来源）。还有其他功能可以验证重复选择，但这不是我的问题的重点。当我选择元素时，它可以工作；数组“levels”被填充， disabled 属性起作用，等等。但是当我尝试清除所有值时，下拉菜单（第二和第三）被禁用，但值显示。

以下是初始化状态列的方法：

const [selectedColumns, setSelectedColumns] = useState({ levels: [] })

我如何处理元素的选择（添加新选择时）：

const handleChange = (e, level) => {

  setSelectedColumns(prev => ({
    ...prev,
    levels: selectedColumns.levels.concat(e.target.value),
  }))

}

清除所有功能（我尝试了多种解决方案，我放了其中 2 个）：

const clearAll = () => {
  setSelectedColumns(prev => ({
    ...prev,
    levels: selectedColumns.levels.filter((column, j) => false),
  }))
}

const clearAll = () => {
  setSelectedColumns({ levels: [] })
}

我有 3 个下拉组件，如下所示：

<FormControl variant='outlined' theme={theme}>
  <InputLabel htmlFor='level1'>
    Level 1
  </InputLabel>
  <Select
    native
    value={selectedColumns.levels[0]}
    onChange={e => handleChange(e, 1)}
  name='level1'
  inputProps={{
    id: 'level1',
  }}>
  <option value='' />
  {data.map((column, i) => (
    <option key={i} value={column.key}>
      {column.text}
    </option>
  ))}
</Select>

这是我单击全部清除按钮时的样子。您会看到他清除的数组，但仍显示值。

标签： reactjsmaterial-ui