reactjs - 隐藏元素时使用 tabIndex 导航

Question

概括

我想了解制表导航如何在浏览器上工作，以便在 React 上使用建议字段执行自定义输入。

客观的

目的是为使用建议下拉菜单提供 2 个自定义输入。当我点击我的输入时，下拉列表会正确显示，我可以通过制表键导航到我的建议。但是当我尝试导航到下一个输入时，下拉菜单显示，但我无法浏览我的第二个下拉建议。

代码示例

我有以下 JSX 代码：

class InputDropdown  React.Component {
    render() {
        return(<div>
                <div id="input1" className="input-wrapper" onMouseEnter={...} onMouseLeave={...} onBlur={...}>
                    <input className={"input"} 
                        value={this.state.search_input} 
                        onKeyDown={(e) => e.keyCode==13?this.props.validate(this.state.search_input)}
                        onFocus={this.setState(display_dropdown_input1: true)}
                        />
                    <div className={"dropdown-wrapper" + this.state.display_dropdown_input1?"":"hidden"}>
                        {this.props.suggestion.map((suggestion, index) => 
                            <div className="suggestion"
                                tabIndex={0}
                                onKeyDown={(e) => e.keyCode==13?this.props.validate(suggestion.text)}
                                onBlur={index+1==this.props.suggestion.length?this.setState({display_dropdown_input1:false})}
                            >{suggestion.text}</div>)}
                    </div>
                </div>
                <div id="input2" className="input-wrapper" onMouseEnter={...} onMouseLeave={...} onBlur={...}>
                    <input className={"input"} 
                        value={this.state.search_input} 
                        onKeyDown={(e) => e.keyCode==13?this.props.validate(this.state.search_input)}
                        onFocus={this.setState(display_dropdown_input2: true)}
                        />
                    <div className={"dropdown-wrapper" + this.state.display_dropdown_input2?"":"hidden"}>
                        {this.props.suggestion.map((suggestion, index) => 
                            <div className="suggestion"
                                tabIndex={0}
                                onKeyDown={(e) => e.keyCode==13?this.props.validate(suggestion.text)}
                                onBlur={index+1==this.props.suggestion.length?this.setState({display_dropdown_input2:false})}
                            >{suggestion.text}</div>)}
                    </div>
                </div>
            </div>)
    }
}

问题

就好像在按下第一个制表时准备了制表导航路径，如果在此按下后出现元素，则它们不会被计算在内。

是否可以在 React 中执行它？

标签： reactjs