React material-ui Autocomplete的多个选定值？答案

【问题标题】：Multiple selected values of React material-ui Autocomplete?React material-ui Autocomplete的多个选定值？
【发布时间】：2021-02-16 00:26:16
【问题描述】：

我在 multiple selection mode 中使用 Material-ui 自动完成。我想在提交表单时获取所有选定的值。根据这个Stackoverflow thread，我们可以在 onChange 事件处理程序上获取单个值，但我想要一个简化的解决方案，在表单提交时获取所有选定的值。这是自动完成的标记

<Autocomplete
  multiple
  id="checkboxes-tags-demo"
  options={devicesAndGroups}
  disableCloseOnSelect
  getOptionLabel={(option: any) => option.name}
  renderOption={(option, { selected }) => (
    <React.Fragment>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.name}
    </React.Fragment>
  )}
  style={{ width: "100%" }}
  renderInput={(params) => (
    <TextField
      {...params}
      name="selectedDevices"
      variant="outlined"
      label="Devices/Groups"
      placeholder="Devices"
    />
  )}
/>;

有没有Autocomplete的属性，可以随时获取所有选中的值？

【问题讨论】：

面临同样的问题。你是怎么解决的？
我发布了答案。

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

我正在使用 Redux-toolkit 进行状态管理，并通过推动 Redux 商店中每个单个选项的选择取消选择来解决问题。

const onSelectionChanged = (...params: any) => {
    const changedOption = params[3].option;
    const selectionType = params[2];  // selected/deselected ... in case of selection, it's === "select-option" 
    dispatch<any>(
      devicesThunkActions.selectDeselect({ changedOption, selectionType })
    );    
};

.
.
.
    onChange={onSelectionChanged}
    renderInput={(params) => (
          <TextField
            {...params}
            name="selectedDevices"
            variant="outlined"
            label="Devices/Groups"
            placeholder="Devices"
            className={classes.customPadding}
          />
      )}

【讨论】：