MUI 自动完成：如何防止打开焦点，而不是打开输入更改？

Question

我试图阻止自动完成功能在用户点击后立即打开建议。我希望它只在用户开始输入时打开。似乎没有实现这一目标的道具。有没有一种方法可以使用 onInputChange 来切换自动完成 'open' 道具（bool）。谢谢

Answer 1

是的，您可以显式控制 open 属性，如果您希望基于用户输入的内容，那么我建议您也显式控制 inputValue 属性。

下面是执行此操作的一种方法的工作示例。除了通常指定的道具外，这还指定了 onOpen、onClose、onInputChange、open 和 inputValue 道具。

onOpen 认为 open 应该设置为 true，它就会得到 called by Material-UI。 handleOpen 在下面的示例中，当 inputValue 为空时忽略此事件。
onClose 认为 open 应该设置为 false，它就会得到 called by Material-UI。下面的示例无条件调用 setOpen(false)，以便它在所有与默认行为相同的场景中仍然关闭。
handleInputChange 在下面的示例中，除了管理 inputValue 状态外，还会根据值是否为空来切换 open 状态。

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  const [inputValue, setInputValue] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    if (inputValue.length > 0) {
      setOpen(true);
    }
  };
  const handleInputChange = (event, newInputValue) => {
    setInputValue(newInputValue);
    if (newInputValue.length > 0) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  };
  return (
    <Autocomplete
      id="combo-box-demo"
      open={open}
      onOpen={handleOpen}
      onClose={() => setOpen(false)}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 }
// and many more options
];

MUI 自动完成：如何防止打开焦点，而不是打开输入更改？

MUI Autocomplete: How to prevent open on focus, instead open on input change?

reactjs

autocomplete

material-ui