Question

我正在为我的小组项目制作日历页面。我正在使用反应大日历。我需要弹出窗口来显示用户无法更改的事件文本。我有几个不同的事件，我希望每个事件在点击该事件时给出描述。这是我到目前为止的代码：

class mycalendar extends Component {
  render() {
    return (
      <div className="calendar  ">
        <BigCalendar
          {...this.props}
          onSelectEvent={event => Popup.alert("what's up")}
          events={eventsCalendar}
          views={{ month: true }}
          step={60}
          defaultDate={new Date()}
          style={{ height: "150vh", padding: "100px" }}
        />
        <Popup
          className="mm-popup"
          btnClass="mm-popup__btn"
          closeBtn={true}
          closeHtml={null}
          defaultOk="Ok"
          defaultCancel="Cancel"
          wildClasses={false}
          closeOnOutsideClick={true}
        />
    );
  };
}

Answer 1

我遇到了同样的问题，我用状态道具将其修复，如下所示：

是我添加了“活动”道具的日历组件：

this.state = {
      event: {},
    }

onclickEvent我添加了一个处理程序：

 onSelectEvent={this.eventClick}

事件点击处理程序将被点击的事件设置为状态道具：

eventClick = event => {
    this.setState({ eventShow: true, event })
  }

并将其发送到弹出窗口：

<PopupEvent
          show={this.state.eventShow}
          onHide={this.handleOnHide}
          event={this.state.event}
        />

现在您在弹出式道具中有了clicked事件。

反应大日历页面

1 个答案: