我正在使用带有自定义事件组件的 React Big Calendar。
在我的自定义组件中,我需要显示一些用户可以点击的按钮(通过弹出框)。
我的弹出窗口工作正常,但我还希望在单击弹出窗口中的按钮时呈现 BigCalendar 的类得到通知。我们如何将“onButtonClick”事件作为 Prop 传递给我的自定义组件?
这是我的代码的简化版本
class Parent extends Component {
popoverButtonClickHandler = (e) => {
//handle button click
}
render() {
return (
<BigCalendar
...
events={myEvents}
components={{
event: CustomEvent
}}
/>
);
}
}
这是我的 CustomEvent 类
class CustomEvent extends Component {
render() {
return (
<div>
<p>My event title: {this.props.title}</p>
<MyPopover>
<Button onClick={this.props.onPopoverButtonClick}>
</MyPopover>
</div>
)
}
}
我想弄清楚如何才能通过
onPopoverButtonClick={this.popoverButtonClickHandler}
到我的 CustomEvent 以便在单击按钮时通知父级。
我有什么想法可以实现这一目标吗?
谢谢
最佳答案
好的,我在查看了 here 后设法让它工作了在 GitHub 上
class Parent extends Component {
popoverButtonClickHandler = (e) => {
//handle button click
}
render() {
return (
<BigCalendar
...
events={myEvents}
components={{
event: CustomEventContainer({
onPopoverButtonClick: this.popoverButtonClickHandler
})
}}
/>
);
}
}
这是 CustomEventContainer 和 CustomEvent
const CustomEventContainer = ({ onPopoverButtonClick }) => props => {
return <CustomEvent event={props} onPopoverButtonClick={onPopoverButtonClick} />;
}
const CustomEvent = React.memo((props) => {
//...
return (
<div>
<Button content='View' onClick={(e) => props.onPopoverButtonClick(e)} />
</div>
);
})
关于reactjs - 如何将 Prop 传递给 React Big Calendar 自定义组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55410652/