如果用户未使用react单击过滤的用户名之一，如何隐藏用户提及建议者？

Question

当用户未从建议者下拉列表中选择任何选项时，我想隐藏用户提及建议者下拉列表。

我要做什么？ 当用户在输入字段中输入@字符时，我会在下拉列表中显示所有可用的用户名。在用户名列表中搜索@字符后输入的所有内容，并显示过滤的下拉列表。

现在，当用户未单击下拉列表中的任何选项时，它不会关闭下拉列表。

我该如何解决？

下面是代码，

class UserMention extends React.purecomponent {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            user_mention: false,
        };
        this.user='';
    }

    user_list = [
        {name: 'John smith'},
        {name: 'Jenna surname2'},
        {name: 'Tuija rajala'},
    ]; 

    get_user = s => s.includes('@') && s.substr(s.lastIndexOf('@') + 
    1).split(' ')[0];

    handle_input_change = (event) => {
        let user_mention;
        this.user = this.get_user(event.target.value);

        if (event.target.value.endsWith('@')) {
            user_mention = true;
        } else {
            user_mention = false;
        }

        this.setState({
             user_mention: user_mention,
             [event.target.name]: event.target.value,
        });
    };

    get_text_with_user_mention = (text, selected_user) => {
        let user_name = selected_user;
        let text_without_user_mention;
        text_without_user_mention = text.slice(0, 
        text.lastIndexOf('@'));
        return text_without_user_mention + user_name;
    };

    handle_select_value = (selected_user) => {
        let text;
        text = this.get_text_with_user_mention(this.state.text, 
        selected_user);
        this.setState({
            text: text,
            user_mention: false,
        });
        this.user = false;
     };

     render = () => {
        let suggested_values = [];
        if (this.state.user_mention) {
            suggested_values = this.user_list
               .map((o) => { return {user_name: o.user_name};});
        }
        if (this.user) {
            suggested_values = this.user_list
                .filter(user => user.user_name.indexOf(this.user) !== -1)
                .map((o) => {return {user_name: o.user_name};});
        }
        return (
            <input
                required
                name="text"
                value={this.state.text}
                onChange={this.handle_input_change}
                type="text"/>
            {this.state.is_user_mention &&
                <SelectInput
                    on_change={this.handle_select_value}
                    values={suggested_values}/>}
            {this.user &&
                <SelectInput
                    on_change={this.handle_select_value}
                    values={suggested_values}/>}
        );
    };
}

有人可以帮我解决这个问题吗？谢谢。