React Material UI 自动完成，带有自定义下拉列表和底部的添加按钮

Question

我想在 React Material-ui中创建自动完成功能，并使用自定义下拉菜单，底部有一个“添加新元素”按钮。

我尝试了几种解决方案，但搜索后保留按钮始终存在问题。有人知道该怎么做吗？如果没有，您是否知道任何其他插件可以做到这一点。

请在此处检查干净的代码。 https://codesandbox.io/s/pense-grothendieck-g7eyg?file=/src/App.js

Answer 1

您可以将纸张组件添加为自动完成组件的道具

<Autocomplete
    ...
    PaperComponent={({ children }) => {
      return (
        <Paper>
          {children}
          <Button
            color="primary"
            fullWidth
            sx={{ justifyContent: "flex-start", pl: 2 }}
            onMouseDown={() => {
              console.log("Add new");
            }}
          >
            + Add New
          </Button>
        </Paper>
      );
    }}
  />

链接到 Codesandbox：https://codesandbox.io/s/autocomplete-with-button-in-dropdown-g5f782