如果@char在使用javascript或react的字符串中的花括号内，如何不显示下拉菜单？

如果@字符在字符串中的花括号内，我不想显示下拉菜单

我想做什么？ 当用户在输入字段中键入@char时，根据@char之后键入的字符串和光标位置，将显示下拉菜单

现在可能有这样的情况，@char可能在花括号内，比如我在输入字段中有字符串，如下所示

”“是的{9@somechar}"

现在用户在@中键入一些字符和字符，如下所示

”“是的{9@some@“char}”并且光标位于字符串中的第二个@char处，现在我不想显示下拉菜单，在这种情况下，我如何才能做到这一点

下面是我试过的

class Showdropdown extends React.PureComponent {
    input_change = (event) => {
        const {value} = event.target;
        this.setState({value: value});
        this.handle_at_character(value);
    };
    handle_at_character = (value) => {
        const str_to_cursor_pos = value.substring(0, 
        event.target.selectionStart);
        const str_after_at = value.includes('@') && 
        str_to_cursor_pos.substring(str_to_cursor_pos.lastIndexOf( 
       '@') + 1);
    if (str_after_at !== false && (str_after_at.match(/\s/g)||[]).length 
        <= 1) {
        const show = menuitems.filter(menuitem => {
            return menuitem.toLowerCase().includes(str_after_at);
        });
        this.setState({show});
    } else {
        this.setState({show: []});
    }
};
    render = () => {
        return (
            <input
                onChange={this.input_change}
                value={this.state.value}/>
            {this.state.show && <Dropdown />}
         )
     }
 }

class Showdropdown扩展了React.PureComponent{
输入更改=（事件）=>{
const{value}=event.target；
this.setState（{value:value}）；
这个。在字符（值）处处理字符；
};
句柄在字符处=（值）=>{
const str_to_cursor_pos=值。子字符串（0，
事件.target.selectionStart）；
const str_在_at=value之后。包括（'@'）&&
str_to_cursor_pos.子字符串（str_to_cursor_pos.lastIndexOf（
'@') + 1);
if（str_after_at！==false&（str_after_at.match（/\s/g）| |[]）长度
{
返回menuitem.toLowerCase（）.includes（str_在_之后）；
});
this.setState（{show}）；
}否则{
this.setState（{show:[]}）；
}
};
渲染=（）=>{
返回(
{this.state.show&}
)
}
}

---

如果@在花括号内，上面的代码也会显示下拉列表。我怎样才能解决这个问题。有人能帮我吗。谢谢。

在您的代码中显示[]值在this.state.show&&。。。案例 保持简单。请改用未定义的：

this.setState({ show });
} else {
    this.setState({ show: undefined });

未定义“显示”时，将隐藏下一个组件

{ this.state.show && <Dropdown /> }

{this.state.show&}

首先，您可能需要

onInput={this.input\u change}

。每次输入发生更改时，“input”事件都会触发。“更改”事件，不管其名称如何，只有在输入焦点更改或用户按下Tab键或Enter键时才会频繁触发。