简体   繁体   English

React material-ui Autocomplete 的多个选定值?

[英]Multiple selected values of React material-ui Autocomplete?

I'm using Material-ui Autocomplete in multiple selection mode .我在多选模式下使用Material-ui Autocomplete I want to get all the selected values on form submission.我想在提交表单时获取所有选定的值。 As per this Stackoverflow thread , we can get individual value on onChange event handler, but I want a simplified solution of getting all selected values on form-submission.根据这个Stackoverflow 线程,我们可以在 onChange 事件处理程序上获取单独的值,但我想要一个简化的解决方案,在表单提交时获取所有选定的值。 Here is the mark-up of Autocomplete这是自动完成的标记

<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"
    />
  )}
/>;

Is there any attribute of Autocomplete, to get all the selected values at any time?是否有自动完成的任何属性,可以随时获取所有选定的值?

I'm using Redux-toolkit for state management, and solved the issue by pushing select deselect of each single option in the Redux store.我正在使用 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}
          />
      )}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React Material-UI Autocomplete:如何在更改另一个字段中的值时清除在自动完成字段中选择的多个值(mui 芯片)? - React Material-UI Autocomplete: How to clear multiple values (mui chips) selected in a Autocomplete field on changing the value in another field? 在 Material-UI 自动完成中获取选定的值 - Getting selected value in Material-UI Autocomplete 获取 React material-UI 自动完成中的值 - Getting the value in the React material-UI Autocomplete React js material-ui 自动完成从 renderInput 中获取所选元素并切换到文本字段的 InputProps - React js material-ui Autocomplete take the selected element from the renderInput and switch to the InputProps of the textfield 使用 material-ui 自动完成获取所选值的“ID” - Get the "ID" of the selected value with material-ui autocomplete [REACT]Material-ui 多个snackbar - [REACT]Material-ui multiple snackbar React-Material-ui:对不是句子中第一个单词的单词自动完成 - React - Material-ui : Autocomplete on words that aren't the first in a sentence React Material-UI 自动完成 - 重置下拉列表 - React Material-UI Autocomplete - reset dropdown list 在单击 material-ui 自动完成空白页时,在 react js 中打开 - On clicking material-ui autocomplete blank page is opening in react js React Material-UI 自动完成自定义“无选项”文本 - React Material-UI Autocomplete customize `no options` text
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM