Material UI 自动完成 clearOnBlur 在 false 时清除

Question

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

即便如此，自动完成器也会在失去焦点后清除输入字段。

非常感谢您的帮助！

这是一个例子：

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

Answer 1

您使用的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 版本，它不起作用。

Answer 2

尝试使用最新版本materialUI，用最新版本总是好的。

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

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

Material UI 自动完成 clearOnBlur 在 false 时清除

Material UI Autocomplete clearOnBlur clears when false

javascript

reactjs

autocomplete

material-ui