react: повторный вызов диалога через изменение состояния

Question

У меня есть выпадающий список и диалог, который отображается при выборе определённого элемента выпадающего списка

Реализовано это следующим образом (выкинул все, чтобы не мешало смотреть):

// функция срабатывающая при выборе элемента в выпадающем списке
handleSelect = (eventKey: any, event: any) => {

    this.setState({
        selected_id:        eventKey,
        is_activated:       event.target.classList.contains('dialogselected')
    });
}

// отобразить выпадающий список и диалог
return (
    <>
        <Dropdown>
            <Dropdown.Menu>
                <Dropdown.Item 
                    onSelect = {this.handleSelect}
                >...</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
        {this.state.is_activated ? <MyDialog /> : null}
    </>
);

Когда выбирается элемент с классом dialogselected отображается диалог.

Если диалог закрыть и еще раз выбрать этот же самый элемент списка, то диалог не отобразится повторно потому что состояние не изменилось, т.е. is_activated как был true так и остался.

Подскажите как можно корректно исправить данную ситуацию?

Т.е. требуется, чтобы диалог вызывался повторно, т.е. надо как-то дать понять reactу, что состояние дернули

Answer 1

нашел решение

в диалог в качестве параметров передается колбек onClose
```
 {this.state.is_activated ? <MyDialog onClose = {this.handleClose} /> : null}
```
диалог при закрытии вызывает полученный колбек
компонент из которого был вызван диалог в данном колбеке скидывает is_activated в false
```
 handleClose = () => {
     this.setState({
         is_activated:       false
     });
 }
```

после этого проблема была решена

БЛОГ НА HUSL

react: повторный вызов диалога через изменение состояния

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