我已经在我的React项目中从MaterialUI导入了Autocomplete组件,并使用它作为复选框的多重选择:https://material-ui.com/components/autocomplete/#checkboxes
我注意到,当我在输入中输入过滤列表,然后选择一个值时,用户插入的过滤器会重置。我想避免这种情况,并继续使用过滤器进行多选,而不是每次都重新插入。我在组件API中没有找到任何 prop 来解决这个问题。
有什么建议吗?
这是我的组件代码:
const VirtualAutocomplete = (props) => {
const classes = useStyles();
const textClasses = textStyles();
return (
<Autocomplete
id={props.id}
style={{ width: 'auto' }}
value={props.value}
limitTags={4}
noOptionsText="No records found."
classes={classes}
disableCloseOnSelect
ListboxComponent={ListboxComponent}
renderGroup={renderGroup}
onChange={props.onChange}
options={props.options}
filterOptions={startsWith}
multiple={props.multiple}
renderInput={(params) =>
<ThemeProvider theme={theme}>
<TextField {...params}
variant='outlined'
classes={{ root: textClasses.formControlRoot }}
InputLabelProps={{ classes: { root: textClasses.labelRoot } }}
label={props.label}
/>
</ThemeProvider>
}
renderOption={(option, { selected }) => (
<Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option}
</Fragment>
)}
/>
);
}
2条答案
按热度按时间gab6jxml1#
创建一个保存输入值的状态。然后在
TextField onChange
上传递函数来改变这个状态。然后在Autocomplete
上传递带有这个状态内容的propsinputValue
。你也可以使用disableCloseOnSelect
props到Autocomplete
,这样选项框就不会在选择选项时关闭。看看他们关于那些 prop 的文档https://material-ui.com/pt/api/autocomplete/
下面是一个使用他们的demo的例子:https://codesandbox.io/s/material-demo-forked-pdh81?file=/demo.js:746-766
zzlelutf2#