Реагировать на выпадающий список с помощью ref и выбрать тег

Question

Я пытаюсь сделать раскрывающийся список с тегом select и который срабатывает, когда я нажимаю на него, что происходит прямо сейчас, но я хочу сделать его активным, даже если щелчок мышью происходит в его заголовке, который находится в том же элементе div).

Так, например, если я нажму "Мой текст", откроется выпадающий список... для этого я использовал ссылки, но не повезло.

Спасибо за ваше время.

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>

Надеюсь это поможет:)