React - 在输入字段中键入特定字符的下拉列表（示例 - {{ 或 @ ）

Question

当用户在输入文本区域中输入特定字符（如“@”或“{{ }}”）时，我需要显示一个列表或下拉列表，从中可以选择一个选项，然后在文本区域中使用。 React.js 中是否有任何特定的库？或者在 React 中有什么简短的解决方案？

Answer 1

您可以监视来自文本区域的输入并使用正则表达式检查特定字符。使用在 true 时安装带有建议的组件的状态。选择一个选项会将其插入文本并将安装状态设置为 false。点击离开应该做同样的事情（并且 MUI 包括一个点击离开监听器帮助组件）。

这里有一个小演示作为概念验证：https://codesandbox.io/s/magical-browser-dk981?file=/src/App.tsx

注意：我使用 Recoil 来管理共享状态，因为我真的很喜欢它。如果不想使用 Recoil，则必须在父组件中声明所有状态并将其作为 props 传递给子组件。

这个演示显然没有完善，在您键入时没有智能建议，您必须自己实现。祝你好运。 :)