react: вызов диалога при выборе элемента выпадающего списка

Question

Использую React и Bootstrap:

создаю элемент выпадающего списка Dropdown:

// отрисовать компонент
render() {
    return (
        <Dropdown>
            <Dropdown.Toggle>...</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item onSelect = {this.ipc__handleSelect}>...</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

при выборе одного из элементов меню мне надо вызвать модальное окно, которое описывается моим компонентом <MyModalDialog />

// обработать выбор элемента из выпадающего списка
ipc__handleSelect = (eventKey: any, event: any) => {
    ...
}

подскажите, как правильнее его вызвать пока единственное, что приходит в голову - отрисовывать элемент сразу, просто невидимым, а потом делать видимым

// отрисовать компонент
render() {
    return (
        <>
            <Dropdown>
                ...
            </Dropdown>
            MyModalDialog show = {this.state.is_showed}/>
        </>
    );
}

// обработать выбор элемента из выпадающего списка
ipc__handleSelect = (eventKey: any, event: any) => {
    this.setState({
        is_showed: true
    });
}

но может это топорно все и есть правильный способ?

Answer 1

Лучше вообще не рендерить модальное окно, если оно отключено. Биндим туглер модала -> пробрасываем пропсами в селект и в сам модал для закрытия окна, если он рендерится.

this.state.is_showed ? <MyModalDialog /> : null

render() {
    return (
        <>
            <Dropdown>
                ...
            </Dropdown>
            {this.state.is_showed ? <MyModalDialog close={/*ф-я изменения стейта для закрытия модала*/} /> : null} // рендерим модал, если он установлен.
        </>
    );
}

// обработать выбор элемента из выпадающего списка
ipc__handleSelect = (eventKey: any, event: any) => {
    this.setState({
        is_showed: true
    });
}

БЛОГ НА HUSL

react: вызов диалога при выборе элемента выпадающего списка

Ответы (1 шт):