Question

我是编程新手。我想在下拉列表中显示已过滤用户的列表。

下面是我要做的事，当用户在输入字段中输入“ @”时，我得到“ @”之后的字符串，并使用该字符串过滤与user_list匹配的字符串。但这不会显示在下拉菜单中。

说，用户键入“ @”，但不显示带有用户列表的下拉列表。

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

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


    console.log("filtered_users", filtered_users);
        return {
            <input
                required
                name="text"
                value={this.state.text}
                onChange={this.handle_input_change}
                type="text"/>
                {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

this.state.user_mention总是 false 。在handle_input_change中设置is_user_mention，但在渲染中选中user_mention。可能是问题所在吗？

由于user_mention为假，因此表达式将短路并且不呈现列表。

为什么不使用react渲染映射过滤对象数组？

1 个答案: