Question

我正在使用Material Ui自动完成组件。我希望当用户键入某些内容而他没有任何结果时，noOptionsText显示一个可以单击以执行某项操作的按钮：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Autocomplete
      options={["HELLO", "HI"]}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      noOptionsText={
        <Button onClick={() => console.log("CLICK SUCCESSFUL")}>
          No results! Click me
        </Button>
      }
    />
  );
}

此处成功显示了按钮，但是当我单击它时，在按钮可以收到点击之前，自动完成功能已关闭。

如果我将debug={true}设置为强制保持菜单打开，那么它会起作用，但这会带来许多其他副作用。也尝试过强制open={true}，但它仍然关闭。

你会怎么做？

Codesandbox演示：https://codesandbox.io/s/vigilant-haslett-sngyb?file=/src/App.js

Answer 1

在Button组件上，不要使用onClick，像这样尝试onMouseDown：

  noOptionsText={
    <Button onMouseDown={() => {
        console.log("CLICK SUCCESSFUL")
    }}>
      No results! Click me
    </Button>

这是重复的重复：

Answer 2

当您单击无选项菜单中的按钮时，TextField变得模糊（没有焦点），您可以通过在onClose回调中记录原因来知道

onClose={(e, reason) => {
  console.log("on close", reason);
}}

抑制这种情况的唯一方法是按照Material-UI API docs中所述设置debug = true。

但是，如果您不想使用debug，则可以通过将按钮设置为选项菜单本身的另一种方法来解决。请记住，与无选项菜单不同，您可以在Autocomplete菜单中注册一次单击以正常选择选项。

您可以像往常一样通过过滤选项来实现，但是如果找不到选项，请返回按钮选项。这是一个例子

import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";

const options = ["HELLO", "HI"];
const buttonOption = (
  <Button
    onClick={(e) => {
      console.log("CLICK SUCCESSFUL");
      e.stopPropagation();
    }}
  >
    No results! Click me
  </Button>
);
const defaultFilterOptions = createFilterOptions();

export default function App() {
  const [selectedOptions, setSelectedOptions] = React.useState("");

  return (
    <Autocomplete
      options={options}
      onChange={(_, value) => {
        if (typeof value === "string") {
          setSelectedOptions(value);
        }
      }}
      renderOption={(o) => o}
      getOptionLabel={(o) => (typeof o === "string" ? o : "")}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      filterOptions={(options, state) => {
        const results = defaultFilterOptions(options, state);

        if (results.length === 0) {
          return [buttonOption];
        }

        return results;
      }}
    />
  );
}

实时演示

Answer 3

您有一种简单的方法来声明状态，只需说“打开”并覆盖自动完成的“打开”属性，设置debug = {true}，然后在 noOption 中单击Button即可。，您可以在此处将打开状态设置为false。这样，它将在“单击按钮”时关闭。

RawContact

材质UI自动完成功能在noOptionsText

3 个答案:

实时演示