Javascript 如何使用react使下拉列表中的选项可选？

我是编程新手。我想在用户输入@character时显示用户列表，并在用户输入@somestring时过滤用户列表。我在div中显示了过滤列表。现在我希望它们是可选择的，一旦用户单击该选项，它应该将所选选项连接到输入字段中已输入的文本中

例如，如果用户输入 hello@然后所有用户的下拉列表应该列出，当他选择其中一个选项时，说user1，输入现在应该看起来像hello user1。我该怎么做呢

以下是我到目前为止所做的尝试

class UserMention extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            text:'',
            user_mention:false,
        };
        this.user='';
     }
     get_user = s => s.includes('@') && s.substr(s.lastIndexOf('@') 
     + 1).split(' ')[0];

     user_list = [
         {name: 'user1'},
         {name: 'first_user'},
         {name: 'second_user'},
     ];

     handle_input_change = (event) => {
         let is_user_mention;
         if (event.target.value.endsWith('@')) {
             is_user_mention = true;
         } else {
             is_user_mention = false;
         }

         this.setState({
             is_user_mention: is_user_mention,
             [event.target.name]: event.target.value,
         });
         this.user = this.get_user(event.targe.value);
     }  

     render = () => {
         const user_mention_name = get_user(this.state.text);
         return {
             <input
                 required
                 name="text"
                 value={this.state.text}
                 onChange={this.handle_input_change}
                 type="text"/>
              {this.state.is_user_mention &&
                <div
                    className="user_mention_dropdown"
                    style={{

                    }}>
                    {this.user_mention_list
                        .map((o,index) => (
                            <div
                                key={index}
                                style={{
                                    padding: '10px 20px',
                                }}>
                                {o.user_name}</div> ))
                      }
                  </div>}
                 {this.user &&
                     <div>
                         {this.user_list.filter(user => 
                             user.name.indexOf(this.user) 
                             !== -1).map((user,index) => (
                              <div key={index}>{user.name}
                              </div>
                              )) 
                          }
                       </div>
                  }
            );};}

类username扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
用户：错，
};
this.user=''；
}
get_user=s=>s.includes（'@'）&s.substr（s.lastIndexOf（'@'））
+1）拆分（“”）[0]；
用户列表=[
{name:'user1'}，
{name:'第一个用户'}，
{name:'second_user'}，
];
处理输入更改=（事件）=>{
让我们来谈谈用户；
if（event.target.value.endsWith（'@'））{
is_user_ention=true；
}否则{
is_user_note=false；
}
这是我的国家({
是用户提到：是用户提到，
[event.target.name]：event.target.value，
});
this.user=this.get_user（event.target.value）；
}  
渲染=（）=>{
const user\u antify\u name=get\u user（this.state.text）；
返回{
{this.state.is\u user\u note&&
{this.user\u提及\u列表
.map（（o，索引）=>(
{o.user_name}）
}
}
{this.user&&
{this.user_list.filter（user=>
user.name.indexOf（this.user）
！==-1）。地图（（用户，索引）=>(
{user.name}
)) 
}
}
);};}

好的，我找到了问题的答案。我创建了一个组件来选择选项。 代码如下：

export default class SelectOptions extends React.PureComponent {
    handle_option_select = (value) => {
        this.props.on_change(value);
    };

    render() {
        return (
            <div>
                {this.props.values.map((value, index) =>
                    <Option
                        value={value.user_name}
                        on_select={this.handle_option_select}/>

                    )}
            </div>
        );
    }
}


export class Option extends React.PureComponent {
    handle_option_select = () => {
        this.props.on_select(this.props.value);
    };

    render = () => {
        return (
            <div onClick={this.handle_option_select}>
                {this.props.value}
            </div>
        );
    }
}

导出默认类SelectOptions扩展React.PureComponent{
句柄\u选项\u选择=（值）=>{
这个。道具。关于改变（价值）；
};
render（）{
返回(
{this.props.values.map（（值，索引）=>
)}
);
}
}
导出类选项扩展了React.PureComponent{
handle_option_select=（）=>{
选择this.props.on（this.props.value）；
};
渲染=（）=>{
返回(
{this.props.value}
);
}
}

在用户提及组件中，使用它如下所示

<Select
    on_change={this.handle_select_value}
    values={values}
 />}

}

这不是一个有效的代码，没有这样的语法：

this.state={text=''，user\u title=false，}我错过了