reactjs React Materail UI自动完成,底部带有自定义下拉菜单和添加按钮

iswrvxsc  于 2023-03-17  发布在  React
关注(0)|答案(3)|浏览(81)

我想在React Materaial-ui中创建一个自定义下拉菜单,在底部有一个按钮“添加新元素”。

我尝试了一些解决方案,但总是有一个问题,以保持按钮后,搜索。任何人有任何想法如何做到这一点?如果没有,你知道任何其他插件可以做到这一点。
请在此处检查干净代码。https://codesandbox.io/s/pensive-grothendieck-g7eyg?file=/src/App.js

6g8kf2rb

6g8kf2rb1#

您是否尝试在材料界面自动完成创建选项。用户可以添加自定义选项,如果他没有找到任何相关的选项。
Materialui自动完成添加自定义选项到自动完成下拉菜单

wnrlj8wa

wnrlj8wa2#

您可以尝试添加const data = [...universityList, {name: Add new}]并将其传递到自动完成中的选项属性。

unftdfkk

unftdfkk3#

您可以将纸张组件作为 prop 添加到自动完成组件中

<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>
      );
    }}
  />

链接到代码沙箱:https://codesandbox.io/s/autocomplete-with-button-in-dropdown-g5f782

相关问题