在 Material-UI 中的自动完成选项末尾添加一个按钮

Question

我正在尝试创建一个自动完成组件，人们将使用它从项目列表中选择一个项目，我已经做到了，没有问题。

\n

问题是，我还想在列表末尾添加一个按钮（就像列表中始终存在的最后一项），这样，如果该人正在查找的项目不存在，则该人可以单击该按钮添加新项目。这是同一个问题并且已得到解答，但是对于react-select，我在material-ui 的API 中找不到任何可以执行相同操作的内容。在反应选择的选项末尾添加一个按钮

\n

一个例子（取自上面的问题）：https ://i.stack.imgur.com/WRFd8.png

\n

我尝试向 TextField 添加 onClick，但是当然，只要有人单击自动完成，就会触发 onClick

\n

  <Autocomplete\n    id="supplierIdd"\n    style={{ width: 300 }}\n    options={suppliers.map((supplier) => supplier.name)}\n    renderInput={(params) => \n      <>\n        <TextField {...params} label="\xd0\x91\xd1\x83\xd0\xbb\xd1\x81\xd1\x82\xd0\xb0\xd1\x82" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />\n      </>\n    }\n  />\n

\n

我还尝试添加到选项数组，但当然，这只是选项数组，而不是元素，那么我将在哪里添加一个或任何元素？

\n

Answer 1

I found solution, You can use "filterOptions" method to add a new button at the bottom.

\n

Check this::

\n

<Autocomplete\n    id="supplierIdd"\n    style={{ width: 300 }}\n    options={suppliers.map((supplier) => supplier.name)}\n    renderInput={(params) => \n      <>\n        <TextField {...params} label="\xd0\x91\xd1\x83\xd0\xbb\xd1\x81\xd1\x82\xd0\xb0\xd1\x82" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />\n      </>\n    }\n    filterOptions={(options) => {\n          const result = [...options]\n          result.push(\n            ((\n              <Button\n                variant="outlined"\n                color="primary"\n                onMouseDown={onAddNew}\n              >\n               + Add New\n              </Button>\n            ) as unknown) as string,  // typecasting required for typescript\n          )\n\n          return result\n        }}\n\n      />\n

\n