时间戳

首页 > 解决方案 > React material-ui Autocomplete的多个选定值？

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

问题描述

我在多选模式下使用Material-ui Autocomplete。我想在提交表单时获取所有选定的值。根据这个Stackoverflow 线程，我们可以在 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"
    />
  )}
/>;

是否有自动完成的任何属性，可以随时获取所有选定的值？

标签： javascriptreactjsautocompletematerial-ui

解决方案

我正在使用 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}
          />
      )}

推荐阅读