Reactjs BigCalendar 添加事件

Question

我正在使用 BigCalendar，我正在尝试添加一个事件。目前，在 github 他们使用 window.prompt();但我想使用模态。但是，什么都没有出现，我不确定为什么。

链接：https://github.com/intljusticemission/react-big-calendar

渲染：

  return(
    <div style={{ height: 700 }}>
      <BigCalendar
        selectable={true}
        localizer={localizer}
        events={this.state.cal_events}
        step={30}
        defaultView='month'
        views={['month','week','day']}
        defaultDate={new Date()}
        scrollToTime={new Date(1970, 1, 1, 6)}
        onSelectEvent={event => alert(event.title)}
        onSelectSlot={this.handleSelect}
      />        
    </div>
  );

handleSelect（用户单击日期以添加事件）

handleSelect = e => {
  //set model to true
this.openModal();
  return(
   <div> 
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      contentLabel="Example Modal"
    >

      <button onClick={this.closeModal}>close</button>
      <div>Add event</div>
      <form onSubmit={this.onFormSubmit}>
        <input />
        <DropdownButton title={this.state.dropDownSelection} key="1" id="test" onSelect={this.onchangeSelectDropdown} >
          <MenuItem eventKey="Option  1"> Option 1</MenuItem>
          <MenuItem eventKey="Option 2"> Option 2</MenuItem>
          <MenuItem eventKey="Option 3"> Option 3</MenuItem>

          <MenuItem divider />
          <MenuItem eventKey="Other">Other</MenuItem>
        </DropdownButton>

        <input type="submit" value="Submit" />
      </form>
    </Modal>
  </div> 
  );

}

问题是模型从不渲染，我不确定为什么。如果这种方式是不可能的，还有其他选择吗？

Answer 1

问题是模型从不渲染，我不确定为什么

这是因为返回的 Modal 组件从未附加到 DOM。

尝试通过有条件地渲染 Modal 来更改您的实现。

handleSelect = e => {
  //set model to true
  this.setState({
    modalIsOpen: true
  });
}

renderModal = () => {
  if (!this.state.modalIsOpen) return;
  return(
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      contentLabel="Example Modal"
    >

      <button onClick={this.closeModal}>close</button>
      <div>Add event</div>
      <form onSubmit={this.onFormSubmit}>
        <input />
        <DropdownButton title={this.state.dropDownSelection} key="1" id="test" onSelect={this.onchangeSelectDropdown} >
          <MenuItem eventKey="Option  1"> Option 1</MenuItem>
          <MenuItem eventKey="Option 2"> Option 2</MenuItem>
          <MenuItem eventKey="Option 3"> Option 3</MenuItem>

          <MenuItem divider />
          <MenuItem eventKey="Other">Other</MenuItem>
        </DropdownButton>

        <input type="submit" value="Submit" />
      </form>
    </Modal>
  );
}

render() {
  return (
    <div style={{ height: 700 }}>
      <BigCalendar
        selectable={true}
        localizer={localizer}
        events={this.state.cal_events}
        step={30}
        defaultView="month"
        views={["month", "week", "day"]}
        defaultDate={new Date()}
        scrollToTime={new Date(1970, 1, 1, 6)}
        onSelectEvent={event => alert(event.title)}
        onSelectSlot={this.handleSelect}
      />
      <button onClick={this.openModal}>Open Modal</button>
      {this.renderModal()}
    </div>
  );
}

在此处查看最小的工作示例：https://codesandbox.io/s/50j9zx7knn