Question

在使用React和TSX构建的应用程序中，我渲染了<input>元素。现在，当用户将焦点输入到元素中时，我将在输入元素下方显示一个输入选项列表，而当用户将同一元素移开焦点时，将不显示列表。它有点类似于组合框。为了处理这两个事件，我使用onFocus进行输入，并使用onBlur进行焦点处理。

我遇到的问题是onBlur，即两个浏览器窗口彼此相邻打开，然后单击输入元素以显示以下选项列表，然后单击另一个浏览器窗口，然后列出未显示的内容。

尽管在焦点离开元素时这种方式很有意义，但我仍然想在元素下方显示列表。换句话说，我希望浏览器窗口独立于浏览器窗口之外的世界。因此，从技术上讲，我仍然关注与同一浏览器窗口有关的input元素。

现在，有没有办法处理上述问题？除了onBlur之外，还有其他元素可以解决问题吗？

TSX代码示例：

private renderInputField(): React.ReactNode {
    return <input id={this.idInput}
        type="text"
        placeholder={this.label}
        className="fieldInput"
        onFocus={event => { this.onElementFocus(); }}
        onBlur={event => { this.onElementBlur(); }}
        onChange={event => { this.onElementChange(); }} />;
}

HTML Input元素事件

0 个答案: