当我在输入文本中输入@时，它在反应中应显示为不同的颜色

Question

handlechangeMessage(event){
        this.setState({
            Message:event
        })
    }
    onselect(event){
        this.handlechangeMessage(event)
    
        this.setState({ showData: false
            })
    }
    onKeyPress(event){
        if(this.state.Message.charAt(this.state.Message.length-1) === "@"){
        if(event.key == '{'){
            this.setState({
                showData:true,
                
            })}
            
        }}

<div >
               <label htmlFor="edit-keyword-title" style={{ width: "100%" }}>
                 Message</label> {/* Needs to get from Admin Configuration */}
                 <div style={{ display:"flex", flexDirection:"row"}}>
                   <input type="text" className="Description-message-container" maxLength="100"
                     value={this.state.Message}onKeyPress={this.onKeyPress}  onChange={(event) => this.handlechangeMessage(event.target.value)}/>
                 </div>
                 
              </div>
              {this.state.showData &&
                        <div className="keywords-list" >
                            
                            {filteredData.map((row) => (
                                
                              <div  onClick={()=>this.onselect(this.state.Message.slice(0,this.state.Message.lastIndexOf("{")+1) + row.name)}>  
                            
                               <div className="inner-keywords"> {row.name}</div>
                            
                            
                            </div>
                            
                            ))}
                            </div>
                            
                            }

我在下面附加了当前输出和所需输出 当我在输入文本中输入@时，它已经显示了一些数据并且必须从该数据中进行选择，所选的数据应该使用不同的颜色。

当前输出：

预期输出：

Answer 1

如果可以使用第三方组件，则可以尝试Antd's 'Mention Component'并为颜色指定自定义样式。