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

IT技术 javascript php autocomplete reactjs
2021-05-22 03:14:10

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

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

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

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