如何在 material-ui/SelectField 组件中启用全选功能？

Question

文档链接 我遵循上述文档链接来实现 Select-field 组件。我没有在此组件中找到用于 select all 的正确文档。

组件的导入语句

import SelectField from 'material-ui/SelectField'; 

组件代码：

<SelectField
    className="search_items"
    multiple={true}
    hintText="Select Item"
    value={values}
    onChange={this.handleChange} >
    {this.menuItems(values)}
 </SelectField>

菜单项功能：

menuItems(values) {
     return unique && unique.map((name) => (
        <MenuItem
            key={name}
            insetChildren={true}
            checked={values && values.indexOf(name) > -1}
            value={name}
            primaryText={name && name.concat('(').concat(sectors.filter(i => i === name).length).concat(')')}
        />
    ));
}

OnChange 函数：

handleChange(event, index, values) {
    this.setState({ values })
}

如何为所有要选择的项目启用全选选项。提前致谢

Answer 1

创建一个Selectwithmultiple属性和一个选项Select All以及其他选项。

与单选一样，您可以通过event.target.value在onChange回调中访问来拉出新值。它始终是一个数组。当Select All被点击时，该值all（在本例）将存在于可被用来切换选择全部或取消选择所有选项的阵列的最后一个索引。

*此示例在选项中带有一个复选框。

这是codeandbox 中工作演示的链接。

const [selected, setSelected] = useState([]);

const handleChange = (event) => {
  const value = event.target.value;
  if (value[value.length - 1] === "all") {
    setSelected(selected.length === options.length ? [] : options);
    return;
  }
  setSelected(value);
};

<Select
  multiple
  value={selected}
  onChange={handleChange}
  renderValue={(selected) => selected.join(", ")}
>
  <MenuItem value="all">
    <ListItemIcon>
      <Checkbox
        checked={options.length > 0 && selected.length === options.length}
        indeterminate={selected.length > 0 && selected.length < options.length}
      />
    </ListItemIcon>
    <ListItemText primary="Select All" />
  </MenuItem>
  {options.map((option) => (
    <MenuItem key={option} value={option}>
      <ListItemIcon>
        <Checkbox checked={selected.indexOf(option) > -1} />
      </ListItemIcon>
      <ListItemText primary={option} />
    </MenuItem>
  ))}
</Select>

Answer 2

创建一个MenuItem以上所有的选择。

<SelectField
        multiple={true}
        hintText="Multiple Select"
        value={values}
        onChange={this.handleChange}
      >
          <MenuItem
            checked={this.state.open}
            value="Select all"
            onClick={this.selectAll}
            primaryText={checkedAll?"Select None":"Select all"}
          />
        {this.menuItems(values)}
      </SelectField>

创建一个状态checkedAll，每当Select All单击该项目时都会更新该状态。每当SelectAll单击 MenuItem 时，都会使用函数将值更新为所需的数据（此处是唯一的）。

selectAll = () => {
    if(this.state.checkedAll)
      this.setState(
        {values:[]}
      );
    else
      this.setState(
        {values:names}
      );
    this.setState({
      checkedAll:!this.state.checkedAll
    });
  }