Question

我尝试使用select标记进行下拉，当我点击它时会触发该触发现在正在发生但是我想要使其可点击，即使鼠标点击发生在其标题中相同的div）。

例如，如果我点击“我的文字”＃34;它应该打开下拉列表...为此我使用了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>

希望这有帮助：）

使用ref和select标签反应下拉列表

1 个答案: