Question

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

我想知道这是否可以通过文档中的ReactJS实现，我似乎无法发现这个功能开箱即用，任何指针都很受欢迎。

Answer 1

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

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

它的渲染功能看起来像：

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

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

使用ReactJS自动提供特定字符的输入

1 个答案: