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

Question

我是编程新手。 我想在用户输入 @ 字符时显示用户列表，并在用户输入 @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>
                  }
            );};}

Answer 1

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

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>
        );
    }
}

在 userment 组件中使用它，如下所示，

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