使用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>
        );
    }

- Leeladhar

---

focusTextInput() { this.textInput.current.onfocus(); }render() { return ( <div className='row abc-container'> <div className='abc-tag' > <div className="text" onClick={this.focusTextInput}> 我的文本 <select className="key-list" ref={this.textInput} value ={this.props.activeClient} > <option >10</option> </select> </div> </div> </div> ); } - Leeladhar

你尝试过设置一个state来确定下拉菜单本身的可见性吗？这个状态值是通过点击My Text标题来切换的。 - kyw

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>

希望这可以帮到你 :)

- dungmidside