使用 ReactJS 自动建议输入特定字符

因此，当使用 Facebook 时，如果您输入 @ 符号，它就会知道您想要链接到朋友/页面。我正在构建一个用户界面，允许用户标记古代文档中的文本。我想做的是，如果用户突出显示一个单词或在单词之前放置 @ # ~ £ 符号，则会弹出自动建议或选项下拉列表。因此，如果我在输入 @name 时输入“这是与 @name 相关的文档”，它会建议名称或地点等，事实上，我需要它来打开另一个模式，以便您可以输入有关该用户/地点/项目的更多信息。

我想知道这是否可以通过文档中的 ReactJS 来实现，我似乎无法找到开箱即用的功能，任何指针都得到了很好的接收。

当然这是可能的。 我不会使用实际的语法，但我会为您指出正确的方向。

假设您有搜索/输入组件。

它的渲染函数看起来像：

render: function(){
    return (<div>
            <input onChange={this.onChange}></input>
            <SuggestionsList data={this.state.value} show={this.state.autoSuggest}></SuggestionsList>
           <div>);
}

现在让我们创建 onChange 函数来设置状态以在我们需要时显示 autoSuggest：

onChange: function(val){
    var state = {value: val};
    if(val[0] === '@'){
       state.autoSuggest=true;
    }
    this.setState(state);
}

您现在需要做的就是创建 SuggestionsList 组件，它将处理获取建议并返回列表。

请注意，您不需要使用这个确切的模式，如果您不想显示任何建议，那么根本不返回建议列表可能更正确，但这取决于您。

我建议你遵循 Facebook 的评论教程：http://facebook.github.io/react/docs/tutorial.html http://facebook.github.io/react/docs/tutorial.html

他们动态地从服务器获取评论并更新。本质上是相同的模式。