Как изменить значение closeMenuOnSelect при событии в response-select?

Question

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

Следующее не работает:

handleSearch = selectedOption => {
    const closeMenuOnSelect = selectedOption.length >= 3;
    this.setState({ closeMenuOnSelect }, () => this.updateSelect());
}

updateSelect = () => {
    console.log(this.state.closeMenuOnSelect); // the state is getting updated but it does not have the effect on the `closeMenuOnSelect` property
}

И компонент:

<Select className='react-select-container'
                            isMulti
                            closeMenuOnSelect={this.state.closeMenuOnSelect}
                            options={this.state.locations}
                            onChange={(e) => this.handleSearch(e)} />

Не требуется на мероприятии. Я просто хочу, чтобы меню оставалось открытым, и когда будет достигнут предел выбранных опций, я хочу закрыть его.

Answer 1

В React Select есть свойство «menuIsOpen», и с его помощью вы можете управлять открытием или закрытием dropDown

const [showMenu, setShowMenu] = useState(false);
<Select className='react-select-container'
        isMulti
        options={this.state.locations}
        onChange={(e) => this.handleSearch(e)}
        menuIsOpen={showMenu}
        onBlur={() => setShowMenu(false)}
        blurInputOnSelect
/>

Итак, теперь вы можете вызвать setShowMenu (true) / setShowMenu (false) для показать или скрыть меню выбора в соответствии с вашими потребностями.