材质 UI 自动完成 clearOnBlur 为 false 时清除

Question

在最近的一个项目中，我正在使用 Material UI 的自动完成功能。 那里我不想清除输入字段，所以我使用clearOnBlur 属性设置为false。

即使这样，自动完成程序也会在焦点丢失后清除输入字段。

不胜感激！

这是一个例子：

https://codesandbox.io/s/blue-moon-2bk87?file=/src/ComboBox.js

Answer 1

尝试使用最新版本的材质 UI，使用最新版本总是好的。

使用最新版本的 MUI 尝试 this 沙盒。

这是改编自 here 的文档演示沙箱。

Answer 2

您使用的material-ui 5.0.0-beta 似乎有问题。在4.12.3 中它工作正常。请查看此codesandbox：

const ComboBox = function () {
  const [value, setValue] = useState("");
  const Combo = useRef();

  const onBlur = (e) => {
    Combo.current.inputValue = value;
  };

  const filterOptions = (options, state) => {
    return options;
  };

  return (
    <Autocomplete
      ref={Combo}
      onChange={(e) => {
        setValue(e.target.value);
      }}
      onSelect={(e) => {
        setValue(e.target.value);
      }}
      filterOptions={filterOptions}
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      onBlur={onBlur}
      clearOnBlur={false}
      inputValue={value}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
};

我尝试手动设置输入值，但由于material-ui版本，它不起作用。