react-popover
react-popover copied to clipboard
how to pass action into popover body?
Hi, i try to pass close action into to popover body, but it cant work fo me. Where i get mistake?
togglePopover(toState) {
const popoverIsOpen =
typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen;
this.setState({
popoverIsOpen,
});
}
...
const popoverProps = {
isOpen: this.state.popoverIsOpen,
preferPlace: 'end',
onOuterAction: e => {
this.togglePopover(false);
},
body: [
<div key="b" className={cx('popover-body')}>
<div>
<ChangeDayForm
date={date}
dayName={dayName}
dayNum={dayNum}
dayTypeId={dayTypeId}
dayTypeName={dayTypeName}
dayStart={dayStart}
dayStop={dayStop}
onCloseCard={e => this.togglePopover(false)}
/>
</div>
</div>,
],
};
class ChangeDayForm extends Component {
constructor(props) {
super(props);
}
render() {
...
return (
....
<Button onClick={this.props.onCloseCard}>Отмена</Button>
);
}
}
Same problem over here. Tried passing markup to body prop using string and array syntax but still cant register actions/events.
Create an external component, then render it inside the popoverProps.body
.
const Test = () => (
<div key="b" onClick={() => console.log('works')}>
Popover contents
</div>
);
....
const popoverProps = {
...
body: <Test />,
};