[英]React Material-UI Autocomplete: How to clear multiple values (mui chips) selected in a Autocomplete field on changing the value in another field?
[英]Multiple selected values of 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"
/>
)}
/>;
是否有自动完成的任何属性,可以随时获取所有选定的值?
我正在使用 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.