[英]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.