Очистить все выбранные значения из поля Material-ui Autocomplete Combo - PullRequest
Новая
       13

Очистить все выбранные значения из поля Material-ui Autocomplete Combo

2 голосов
/ 07 января 2020

Решение

Я использовал renderTags в моем Autocomplete: 

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 />
)}

Обновление после комментария от Райана Когсвелла : 

<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 находится в компоненте grandparent, где Autocomplete is: 

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

Компонент Select, который я хочу использовать для сброса компонента Autocomplete: 

<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,
    })
}

1 Ответ

0 голосов
/ 14 января 2020

Я рекомендую использовать управляемый вход (т. Е. Указать value опору для Autocomplete, используя selectedAutocompleteValues). Затем очистка Autocomplete - это просто вопрос надлежащего обновления вашего состояния.

Пример такого подхода вы можете увидеть в следующем ответе: Material ui Autocomplete: можно ли создавать теги для событий, кроме «Ввод» событий? .

...