Вам нужно будет передать реквизиты во всплывающее окно, чтобы сообщить ему, когда открывать, а когда не открывать.
Ваш компонент должен иметь state, установленный для каждого всплывающего окна, или передаваться в реквизитах, чтобы сообщить всплывающим подсказкамкогда отображать.Вы можете установить в конструкторе состояние по умолчанию и распространять его перед установкой нового состояния с новым открытым Popover.Вот как я работаю с модалами.
constructor(props) {
super(props);
this.state = {
vendor: {} // Just showing my default state this gets set and this.defaultState is spread after my fetch request completes in componentWillMount()
};
this.defaultState = {
isPopoverOpen: {
// ---- Default Popover booleans can go here
editVendor: false
}
};
}
Актуальная функция, которая управляет состоянием Popover в состоянии.
// onClick of element would be onClick={this.handleTogglePopover('editVendor')}
handleTogglePopover = id => {
const currentState = Object.assign({}, this.state);
this.setState({
currentState,
...this.defaultState, // spreading default will set everything to false
isPopoverOpen: {
[id]: true // then the newly clicked to true
}
});
};