如何使用带有 React.js 的 Material-ui 在自动完成菜单上添加更新和删除按钮答案

【问题标题】：How can I add update and delete button on Autocomplete menu using Material-ui with React.js如何使用带有 React.js 的 Material-ui 在自动完成菜单上添加更新和删除按钮
【发布时间】：2021-06-19 22:00:41
【问题描述】：

我正在尝试构建自动完成组件，当它打开时，我可以在选择菜单中添加、更新和删除选项。

感谢material-ui Autocomplete Creatable component，我可以轻松地添加操作但是没有关于其余操作的参考。（更新和删除）

这是我要创建的示例图像。名称和按钮将是选择菜单的选项。

我怎样才能创建像上面这样的选项？我也应该操纵每个选项的 dom 吗？

【问题讨论】：

您可以在material-ui Autocomplete 中使用Multiple values，它将为您提供删除添加和更新的选项，example：codesandbox.io/s/xqex8

标签： reactjs material-ui

【解决方案1】：

const TodoApp = () => {
const [inputArray, setInputArray] = useState([])
  return (
 <div>
  {
    inputArray.map(item => (
    <input id={item.id} value={item.value)/>
)
)
  }
<button onClick={() => setinputArray(s => [...s, {id: 1231231313}])}>
</div>  
)
}

【讨论】：