为选择/下拉列表创建默认值，并且可以手动再次选择默认值 - ReactJs

Question

在此处发布问题之前，我已经浏览了许多网站，并了解如何在select 中创建defaultValue 但是，所有网站都在谈论设置值，但没有谈论再次选择默认值的地方.

我需要什么

我有一些 6 个具有不同值的下拉控件，每个下拉列表都由 API 填充。 现在我已将defaultValue 用作我的工作"--Select One--"，它按预期工作，但是我需要再次选择默认值手动需要，例如如果用户想要将列表撤消回默认值**(--Select One--)**。

为什么我需要这个

如前所述，我有 6 个下拉列表值，假设我选择了 5 个下拉列表的值，我想从任何下拉列表中撤消其中一个选项，然后唯一的选项是 clear 所有下拉列表并再次进行选择.

代码

<Select className="AdvancedFilterText"
          ref={selectRef}
          options={categoryOptions}
          styles={{
            option: base => ({
              ...base,
              borderBottom: '1px solid hsl(0, 0%, 80%,.5)',
              height: '100%',
            }),
          }}
          defaultValue={{value: "0", label:"--Select One--"}}
          isSearchable
          placeholder={"CHOOSE CATEGORY"}
          onChange={event => onCategorySelect(event)}>
        </Select>

帖子添加MenuItem

Answer 1

设置displayEmpty 并有一个选项value=''

const data = [
  { value: 'accounting', label: 'Accounting' },
  { value: 'authority', label: 'Authority' },
  { value: 'coverage', label: 'Coverage' },
  { value: 'investigation', label: 'Investigation' }
]; // data from server

<Select displayEmpty>
  <MenuItem value=''>Select...</MenuItem>
  {data.map(item => 
    <MenuItem key={item.value} value={item.value}>
      {item.label} 
    </MenuItem>)
  }
</Select>