reactjs - Material UI 自动完成在 noOptionsText 中创建可点击的按钮

Question

我正在使用 Material Ui Autocomplete 组件。我希望当用户输入内容时，他没有得到任何结果，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}但它仍然被关闭。
你会怎么做？
代码沙盒演示: 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>

这是副本的副本: Action button in Material UI Autocomplete for No Options