如何使用文本光标选择开始使用react列出建议下拉列表？

Question

我想根据文本光标的位置显示用户名建议下拉列表，因此如果在文本光标之前有一个@，我们将搜索用户名，直到字符串结尾或找到空白字符为止。

以下是当用户在字符串末尾输入@时实际显示用户名建议下拉列表的代码...如果用户也在字符串中间某处输入@，我也要显示用户名下拉列表... < / p>

例如，当用户键入“ i am @ user1”时，以下代码有效 但是，当用户键入“ i am @ user1”并在两次输入之间再次输入类似“ i am @ user2 @ user1”的消息时，用户名建议下拉列表将不可见。

有人可以帮我这个忙吗？谢谢。

class UserMention extends react.purecomponent {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            suggestions: [],
        };
     }

     user_list = [
         {name: 'user2 surname'},
         {name: 'tuija Rajala'},
     ];

     handle_input_change = (event) => {
         const { value } = event.target;
         if (value.includes('@') && value.indexOf('@') === value.length - 
         1) {
             this.setState({
                 [event.target.name]: value,
                 suggestions: [...this.user_mention_list],
             });
         } else if (value.includes('@') && value.length > 1) {
               const string_after_at = value.slice(value.indexOf('@') + 
               1).toLowerCase();
               const new_suggestions = this.user_mention_list.filter(user 
               => {
                      return 
                      user.name.toLowerCase().includes(string_after_at);
                  });
                  this.setState({
                      [event.target.name]: value,
                      suggestions: new_suggestions,
                  });
          } else {
              this.setState({
                  [event.target.name]: value,
                  suggestions: [],
              });
          }
     };

     get_comment_with_user_mention = (comment, selected_user) => {
         let user_name = selected_user;
         let comment_without_user_mention;
         comment_without_user_mention = comment.slice(0, 
         comment.lastIndexOf('@'));
         if (comment_without_user_mention.length > 0) {
             return ' ' + comment_without_user_mention + user_name;
         } else {
             return comment_without_user_mention + user_name;
         }
     };

     handle_select_value = (selected_user) => {
         let text;
         text = this.get_comment_with_user_mention(this.state.new_comment, 
         selected_user);
         this.setState({
             text: text,
         });
      };

      render = () => {
          return (
              <form>
                  <div>
                      <input
                          required
                          name="text"
                          value={this.state.text}
                          onChange={this.handle_input_change}
                          type="text"/>
                  <div>
                  {this.state.suggestions.length > 0 &&
                      <SelectInput
                          on_change={this.handle_select_value}
                          values={this.state.suggestions}/>}
               </form>);
       };
   }