Material-ui 自动完成清除值

Question

我的反应代码中有一个问题。

我使用 Material-ui 和 redux-form。我有选择输入，更改此选择后，我应该重置 .我使用 react-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"
        />
    )}
/>

原文由 Kirill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 value 属性上使用 hooks 破坏了自动完成组件的功能（至少对我而言）。使用类和设置本地状态是一样的。

幸运的是它是一个反应组件，所以它有一个“关键”道具。当 key 属性更改时，组件将使用默认值重新渲染（这是一个空数组，因为没有选择任何内容）。我在父组件中使用了钩子，并在需要重置时将值传递给 key 道具。

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

希望这可以帮助！

原文由 Milan Neninger 发布，翻译遵循 CC BY-SA 4.0 许可协议