当用户在输入文本区域中输入特定字符（如“@”或“{{ }}”）时，我需要显示一个列表或下拉列表，从中可以选择一个选项，然后在文本区域中使用。React.js 中是否有任何特定的库？或者在 React 中有什么简短的解决方案？
问问题
46 次
1 回答
0
您可以监视来自文本区域的输入并使用正则表达式检查特定字符。使用在 true 时安装带有建议的组件的状态。选择一个选项会将其插入文本并将安装状态设置为 false。点击离开应该做同样的事情（并且 MUI 包括一个点击离开监听器帮助组件）。
这是一个小型演示作为概念验证：https ://codesandbox.io/s/magical-browser-dk981?file=/src/App.tsx
注意：我使用 Recoil 来管理共享状态，因为我真的很喜欢它。如果您不想使用 Recoil，则必须在父组件中声明所有状态并将其作为道具传递给子组件。
这个演示显然没有完善，在您输入时没有智能建议，您必须自己实现。祝你好运。:)
于 2021-12-30T18:12:33.813 回答