Question

当用户在输入字段中输入@时，我正在显示建议下拉列表。

以下代码可在以下情况下使用

->当用户键入@作为起始字符时，会在建议下拉列表中显示所有用户。

->根据字符串“ user”输入@user过滤器下拉列表

->在字符串中的任意位置输入@会显示建议下拉列表。

但是我希望它即使在用户键入“ hello @user”然后重新键入“ hello @@ user”时也显示建议下拉菜单，现在我希望该下拉菜单显示在当前放置光标的第一个@ char位置。 / p>

我该如何修复下面的代码？

class UserMention extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: "",
            user_list: [
                { name: "John smith" },
                { name: "Jenna surname2" },
                { name: "Tuija rajala" }
            ],
            suggestions: []
        };
    }

   handleOnChange = e => {
      const { value } = e.target;
      const { user_list } = this.state;
     //show all user suggestions
     if (value.includes("@") && value.indexOf("@") === value.length - 1) {
         this.setState({
             text: value,
             suggestions: [...this.state.user_list]
         });
         //show matching user suggesstions
     } else if (value.includes("@") && value.length > 1) {
         const stringAfterAt = value.slice(value.indexOf("@") +          1).toLowerCase();
         const newSuggestions = user_list.filter(user => {
             return user.name.toLowerCase().includes(stringAfterAt);
         });
         this.setState({
             text: value,
             suggestions: newSuggestions
         });
         //display no users if they do not use the @ symbol
    } else {
        this.setState({
            text: value,
            suggestions: []
        });
    }
  };

 createSuggestionsList = () => {
     const { suggestions } = this.state;
     return suggestions.map(user => {
         return <div>{user.name}</div>;
     });
 };

 render = () => {
     return (
         <div>
             <input
                 required
                 name="text"
                 value={this.state.text}
                 onChange={this.handleOnChange}
              />
              {this.createSuggestionsList()}
         </div>
    );
  };
}

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

Answer 1

好吧，但是，您想要删除任何内容，这听起来像是简单地查找一个字符串是否包含两个@而不是一个@，这是您向代码处抛出比所需更多的东西的原因。

这里是jsbin of using regex to solve that problem。

'your @ string @'.match(/@/g).length

这是主要的可操作部分。它只是将您的字符串与“ @”的正则表达式进行比较。 //生成一个正则表达式文字。末尾的g用于表示全局/贪婪，并且选择多个。 Match返回一个数组，您可以检测该数组的长度。

对于下拉菜单本身，您可以在渲染方法中执行以下操作：

render(){
    return (
    <div className="dropdownElement" style={{display: this.state.inputString.match(/@/g).length>2?'block':'none' }}>
       {content}
    </div>)
}

请让我知道其中任何一个都没有太大意义。我在render方法中的JSX的JS表达式中使用了三进制，这可以作为标准if语句来完成。

当用户使用react在输入字段中键入第二个@时，如何显示建议下拉列表？

1 个答案: