如果我在 Material UI 自动完成输入字段之外单击，则输入字段的所有文本都会消失

Question

我正在使用 Material Ui 自动完成组件。因此，如果您在该框中写了一些内容，然后单击该输入字段之外的任何位置，您的输入字段文本就会被清除。我该如何解决这个问题？

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

export default function Filter() {
  return (
    <Autocomplete
      id="filter-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      filterOptions={x => x}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Custom filter" variant="outlined" />}
    />
  );
}

Answer 1

刚刚能够解决我面临的问题。只需在自动完成组件中添加 clearOnBlur={false} 属性即可完成这项工作。