Reactjs 如何使用react简化基于输入的用户建议下拉列表？

我想根据用户输入显示建议下拉列表。下面的代码在3种情况下工作

->用户仅输入@char显示所有用户建议

->@比如说“@user”会显示使用“user”过滤的用户建议

->如果在输入中的任意位置输入@（输入可能包含多个@），则基于光标位置和@后的字符串，在光标位置筛选用户建议之前

这是可行的，但我想把它简化一点。有人能帮我吗？谢谢

class User extends React.PureComponent {
    state = {
        text: '',
        suggestions: [],
    };
    user_list =  [
        {name: 'user1'},
        {name: 'user2'},
    ];

    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) {
            let string_after_at;
            if (event.target.selectionStart > value.lastIndexOf('@')) {
                string_after_at = value.slice(value.lastIndexOf('@') + 
                1).toLowerCase();
            }

            if (event.target.selectionStart <= 
            event.target.value.indexOf('@') && event.target.selectionStart 
            <= event.target.value.lastIndexOf('@')) {
                this.setState({
                    [event.target.name]: value,
                    suggestions: [],
                 });
            }

            if (event.target.selectionStart > value.indexOf('@') && 
            event.target.selectionStart <= value.lastIndexOf('@')) {
                let string_after_cursor_position = 
                value.substr(event.target.selectionStart, value.length - 
                1).split(' ')[0];
                if (string_after_cursor_position.startsWith('@')) {
                    string_after_cursor_position = '';
                }
                const string1 = value.substr(0, 
                event.target.selectionStart);
                const string_from_at = 
                string1.slice(string1.lastIndexOf('@') + 1);
                string_after_at = string_from_at + 
                string_after_cursor_position ;
            }
            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: [],
               });
        }
    };

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

类用户扩展React.PureComponent{
状态={
文本：“”，
建议：[]，
};
用户列表=[
{name:'user1'}，
{name:'user2'}，
];
处理输入更改=（事件）=>{
const{value}=event.target；
如果（value.includes（'@'）&&value.indexOf（'@'）==value.length-
1) {
这是我的国家({
[event.target.name]：值，
建议：[…此.user\u提及\u列表]，
});
}else if（value.includes（'@'）&&value.length>1）{
让我们在一个接一个地串起来；
if（event.target.selectionStart>value.lastIndexOf（'@'））{
在=value.slice（value.lastIndexOf（'@'）+
1） .toLowerCase（）；
}
如果（event.target.selectionStart{
返回(
{this.state.suggestions.length>0&&
}
);
}
}

---

谢谢。

看看这是否适合您：

函数应用程序（）{
const inputRef=React.useRef（null）；
常量[inputValue，setInputValue]=React.useState（“”）；
const[userList，setUserList]=React.useState([
{姓名：'John Joe'，用户名：'johnjoe'}，
{名称：'Jane Jannet'，用户名：'Jane Jannet'}，
{名称：'Jack Daniels'，用户名：'jackdaniels'}
]
);
const[partialments，setpartialments]=React.useState（null）；
const[showSuggestions，setShowSuggestions]=React.useState（false）；
常量[suggestionList，setSuggestionList]=React.useState(
['johnjoe'、'janejannet'、'jackdaniels']
);
函数onChange（事件）{
常量regexp=/@[a-zA-Z0-9]*$/；
if（regexp.test（event.target.value））{
setPartialModen（event.target.value.split（'@'）.pop（））；
设置显示建议（正确）；
}
否则{
设置显示建议（错误）；
}
setInputValue（event.target.value）；
}
函数焦点输入（）{
inputRef.current.focus（）；
}
返回(
{建议&&
}
);
}
功能建议（道具）{
功能选择建议（用户名）{
常量regexp=/@[a-zA-Z0-9]*$/；
const newValue=props.inputValue.replace（regexp，username+''）；
applyMention（{target:{value:newValue}}}）；//这模拟了ONCHANGE事件
props.focusInput（）；
}
const suggestionItems=props.suggestionList
.filter（（项目）=>项目包括（道具部分说明））
.map（（项目）=>
选择建议（'@'+项目）}>@{item}
);
返回(
{suggestionItems}
);
}
ReactDOM.render（，document.getElementById（'root'）；

.container{
边框：1px纯银；
宽度：150px；
}
.项目{
光标：指针；
}
.项目：悬停{
颜色：蓝色；
}
输入{
宽度：300px；
}

---

看看这是否适合您：

函数应用程序（）{
const inputRef=React.useRef（null）；
常量[inputValue，setInputValue]=React.useState（“”）；
const[userList，setUserList]=React.useState([
{姓名：'John Joe'，用户名：'johnjoe'}，
{名称：'Jane Jannet'，用户名：'Jane Jannet'}，
{名称：'Jack Daniels'，用户名：'jackdaniels'}
]
);
const[partialments，setpartialments]=React.useState（null）；
const[showSuggestions，setShowSuggestions]=React.useState（false）；
常量[suggestionList，setSuggestionList]=React.useState(
['johnjoe'、'janejannet'、'jackdaniels']
);
函数onChange（事件）{
常量regexp=/@[a-zA-Z0-9]*$/；
if（regexp.test（event.target.value））{
setPartialModen（event.target.value.split（'@'）.pop（））；
设置显示建议（正确）；
}
否则{
设置显示建议（错误）；
}
setInputValue（event.target.value）；
}
函数焦点输入（）{
inputRef.current.focus（）；
}
返回(
{建议&&
}
);
}
功能建议（道具）{
功能选择建议（用户名）{
常量regexp=/@[a-zA-Z0-9]*$/；
const newValue=props.inputValue.replace（regexp，username+''）；
applyMention（{target:{value:newValue}}}）；//这模拟了ONCHANGE事件
props.focusInput（）；
}
const suggestionItems=props.suggestionList
.filter（（项目）=>项目包括（道具部分说明））
.map（（项目）=>
选择建议（'@'+项目）}>@{item}
);
返回(
{suggestionItems}
);
}
ReactDOM.render（，document.getElementById（'root'）；

.container{
边框：1px纯银；
宽度：150px；
}
.项目{
光标：指针；
}
.项目：悬停{
颜色：蓝色；
}
输入{
宽度：300px；
}