如何改变多值芯片的状态响应矩阵用户界面自动完成

Question

我想通过自动完成实现一个函数。

这是我检查过的文档：https://mui.com/material-ui/react-autocomplete/

我正在开发的功能是，用户可以从自动完成列表中选择多个值，这些值显示为芯片，就像上面文档中的示例一样。

高级部分是，例如，一个芯片可以显示为默认红色，当用户单击该芯片时，它可以变成蓝色。也就是说，用户可以通过点击这些芯片来控制每个芯片的状态，从而实现切换功能。

例如，用户从多个值自动完成列表中选择“茶叶”、“棒球”和“铅笔”，然后首先显示“茶叶”、“棒球”和“铅笔”。当用户点击“茶”芯片时，它会变成蓝色，而“棒球”和“铅笔”则保持红色。接下来，当用户再次点击“茶”芯片时，它可以再次恢复红色，而“棒球”和“铅笔”则保持红色。另外，我也想得到每个芯片的当前颜色状态。

我阅读了很长时间的文档，但仍然不知道如何实现有状态的多值自动完成组件。

谢谢你们的帮助。

Answer 1

管理颜色本身并不复杂。但是，您希望在用户进入下拉列表后选择哪些芯片的功能不是由这个组件提供的。您想要的是根据用户在下拉列表中输入的值填充列表。它们应该显示为红色芯片，只有当用户单击它们时，它们才会变成蓝色(因此最终被选中)。如果你仔细看一下这个组件，这个特性就不存在了。

您需要一些其他的选择，否则您需要制作一个自定义组件。您可以检查此组件并尝试自定义实现。https://mui.com/material-ui/react-chip/