Material-ui autocomplete очистить значение

Question

У меня есть одна проблема в моем коде реакции.

Я использую Material-ui и redux-form. У меня есть выбор входа, как и после изменения этого выбора я должен сбросить значение в. Я использую действие «изменить» из реактивной формы и установить значение для текстового поля. Но лейбл по-прежнему остается. Могу ли я очистить или сбросить значение в?

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='Нет доступных вариантов'
    loadingText='Загрузка...'
    openText='Открыть'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

Answer 1

Использование перехватчиков для значения prop нарушает функциональность компонента автозаполнения (по крайней мере, для меня). Использование класса и установка локального состояния одинакова.

К счастью, это реактивный компонент, поэтому у него есть «ключевая» опора. Когда изменяется ключевой объект, компонент повторно отображается со значениями по умолчанию (который является пустым массивом, поскольку ничего не выбрано). Я использовал зацепки в родительском компоненте и передавал значения ключевому винту, когда требуется перезагрузка.

<Autocomplete
    key={somethingMeaningful} // Bool, or whatever just change it to re-render the component
//...other props
/>

Надеюсь, это поможет!

Answer 2

используйте value в вашем <Autocomplete /> следующим образом:

<Autocomplete
    value={this.state.value} //insert your state key here
//...other props
/>

Затем очистите состояние этой клавиши, чтобы очистить значение поля автозаполнения