Question

我是javascript编程的新手，我想使用react在消息中添加usermention。我不想使用任何插件。

我要做什么？

我有一个消息字段（输入元素）。当用户输入@时，它应该打开一个包含用户列表的下拉菜单。用户输入@字符时，如何触发打开下拉菜单？

有人可以对此提供见解。谢谢。

下面是我尝试过的代码，

class UserMention extends React.PureComponent {
    state = {
        message: '',
    };
    const user_mention_list =  [ user1, user2,....];

    handle_input_change = (event) => {
        this.setState({
             [event.target.name]: event.target.value,
        });
        const character = event.target.value.match(/@/) ? "true" : 
        "false";
        console.log("character", character);
     };
     render = () => {
         return {
             <input
                 name="message"
                 value={this.state.message}
                 onChange={this.handle_input_change}
                 type="text"
             />
         }
     }
}

因此，在输入更改时，我检查输入字段中输入的@字符。然后我必须打开一个包含用户列表的下拉菜单。现在，我在变量user_mention_list中有一个用户列表。

现在想知道这样做是否有任何有效的方法。

Answer 1

您可以执行以下操作：

class UserMention extends React.PureComponent {
    state = {
        message: '',
        showModal: false
    };
    const user_mention_list =  [ user1, user2,....];

    handle_input_change = (event) => {
        this.setState({
             [event.target.name]: event.target.value,
        });
        const character = event.target.value.match(/@/)
        if (event.target.value.includes('@') {
           this.setState({ showModal: true })
        }
     };
     render = () => {
         const { showModal } = this.state
         return {
             <div>
             { showModal && <Modal /> } <-- Render the modal here
               <input
                   name="message"
                   value={this.state.message}
                   onChange={this.handle_input_change}
                   type="text"
               />
             </div>
         }
     }
}

Answer 2

您也可以为此使用提及的react js库。

https://www.npmjs.com/package/react-mentions

如何使用reactjs在消息中添加用户提及？

2 个答案: