javascript MaterialUI Autocomplete -选择选项时避免清除输入文本过滤器

yquaqz18  于 2023-03-28  发布在  Java
关注(0)|答案(2)|浏览(101)

我已经在我的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>
            )}
        />
    );
}
gab6jxml

gab6jxml1#

创建一个保存输入值的状态。然后在TextField onChange上传递函数来改变这个状态。然后在Autocomplete上传递带有这个状态内容的props inputValue。你也可以使用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

zzlelutf

zzlelutf2#

export const AutocompleteNonClearnableOnSelect = observer((props: AutocompleteProps<any, any, any, any>) => {
    const [value, setValue] = useState("");

    return <Autocomplete {...props}
                         onInputChange={(_, value, reason) => reason !== 'reset' && setValue(value)}
                         inputValue={value}/>;
})

相关问题