从 material-ui 自动完成组合框中清除所有选定的值

Posted 2023-02-22

【中文标题】从 material-ui 自动完成组合框中清除所有选定的值

【英文标题】：Clear all selected values from material-ui Autocomplete Combo box

【发布时间】：2020-04-24 19:12:45

【问题描述】：

解决方案

我在我的Autocomplete 中使用了renderTags：

renderTags=() => (
    <div>
        (props.selectedAutocompleteValues).map(value => (
            <Chip key=value label=value />
        ))
    </div>
)

原始问题

我正在尝试添加一个处理程序，该处理程序从具有多个值和一个下拉列表的自动完成中清除所有选定的值。基本上复制自动完成内部清除按钮的动作，并从自动完成外部触发此动作。

这样做的原因是我想要一个过滤器（material-ui Select），它允许减少自动完成中的选项数量。更改过滤器值时，应清除先前选择的自动完成值。

我正在使用以下代码呈现自动完成中的值，所以看起来我需要做的是以某种方式更改params。有关如何执行此操作或清除值的其他方法的任何建议？

renderInput=params => (
    <TextField ...params label="my-label" variant="outlined" fullWidth />
)

Ryan Cogswell 发表评论后更新：

<Autocomplete
    multiple
    disableCloseOnSelect
    autoHighlight
    clearText='Nullstill'
    closeText='Lukk'
    openText='Åpne'
    options=Array.from(props.myMap.keys())
    onChange=(event: any, value: string) => 
        props.myUpdateFunction(value)
    
    renderInput=params => (
        <TextField ...params label="myLabel" variant="outlined" fullWidth />
    )
/>

其中myUpdateFunction 位于Autocomplete is 的祖父组件中：

myUpdateFunction = (myArray: Array<string>) => 
    this.setState(
        selectedAutocompleteValues: myArray,
    )

我想用来重置Autocomplete 组件的Select 组件：

<Select
    labelId="my-select-label"
    id="my-select"
    autoWidth
    value=props.mySelectValue
    onChange=(event: any) => props.updateSelect(event.target.value)>
    Array.from(props.selectOptions, ([optionNr, optionName]) =>
        <MenuItem key=optionNr value=optionNr>optionName</MenuItem>
    )
</Select>

使用以下 onChange 处理程序：

updateFylke = (value: number) => 
    const selectedAutocompleteValues = new Array<string>();
    this.setState(
        mySelectValue: value,
        selectedAutocompleteValues: selectedAutocompleteValues,
    )

【问题讨论】：

请显示您的Autocomplete 组件的完整代码以及您用来管理其状态的任何相关代码。

我现在添加了更新。

【参考方案1】：

我建议使用controlled input 方法（即使用selectedAutocompleteValues 为Autocomplete 指定value 属性）。然后清除Autocomplete 只是适当更新您的状态的问题。

您可以在此相关答案中看到此方法的示例：Material ui Autocomplete: can tags be created on events aside from 'Enter' events?。