javascript - 使用 ref 和 select 标签对下拉菜单使用react

Question

我正在尝试使用 select 标签创建一个下拉列表，当我点击它时会触发它，这正在发生，但我想让它可以点击，即使鼠标点击发生在同一个 div 中的标题上).

因此，例如，如果我点击“我的文本”，它应该打开下拉菜单...为此我使用了 refs 但没有运气。

感谢您的宝贵时间。

focusTextInput() {
        this.textInput.current.onfocus();
      }

render() {
        return (
            <div className='row abc-container'>
                <div className='abc-tag' >
                    <div className="text" onClick={this.focusTextInput}> My Text 
                        <select className="key-list"   ref={this.textInput}
                        value ={this.props.activeClient} >
                            <option >10</option>
                            <option >20</option>
                        </select>
                    </div>
                </div>
            </div>
        );
    }

Answer 1

您应该使用state 来控制下拉列表的可见性。我通常使用 CSS 来更改组件的显示。像这样:

state = { isShowDropdown: false }

<div 
    className="text" 
    onClick={() => this.setState({ isShowDropdown: !this.state.isShowDropdown })}
> 
    My Text 
    <select
        style={{ display: this.state.isShowDropdown ? "initial" : "none" }}
        className="key-list" ref={this.textInput}
        value ={this.props.activeClient} 
    >
        <option>10</option>
        <option>20</option>
    </select>
</div>

希望这有帮助:)