使用React-Day-picker和React Router V4链接到其他页面

Question

我正在尝试使用此示例，以创建一个日历，以列出当月的事件，我有工作，但是我尚未确定的是如何进行操作，以便用户可以单击事件名称，并将其带到该事件页面。

因此，如果他们单击生日之一，则将他们带到活动页面，在那里他们可以看到有关该生日的更多信息。

当前，我的活动页面正在使用此功能呈现：

renderEvents() {
    const {events} = this.state
    this.state.events = {};
    let eventItems = this.state.eventGet.map(event => {
        console.log(event.id)
        if(typeof(events[moment(event.date).date()]) !== "undefined") {
            events[moment(event.date).date()].push(event.name)
        } else {
            events[moment(event.date).date()] = [event.name]
        }
    });
    function renderDay(day) {
      const date = day.getDate();
      const dateStyle = {
        position: 'absolute',
        color: 'lightgray',
        bottom: 0,
        right: 0,
        fontSize: 20,
      };
      const containerStyle = { 
        margin:'2px',
        border: '1px solid #3a87ad',
        borderRadius: '3px',
        position: 'relative',
        display: 'block',
        cursor: 'pointer'
     };
     const textStyle = {
        fontSize: '0.8em', 
        textAlign: 'left',
        margin: '1.5px',
     }
      const cellStyle = {
        height: 150,
        width: 160,
        position: 'relative',
      };
      return (
        <div style={cellStyle}>
          <div style={dateStyle}>{date}</div>
          {events[date] &&
            events[date].map((name, i) => (
              <div onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events' + i)} key={i} style={containerStyle}>
                <div style={textStyle}> {name} </div>
              </div>
            ))}
        </div>
      );
    }
    return (
        <div>
                <Grid component="section" className="section--center" shadow={0} noSpacing>
                <Cell col={12}>
                    <FABButton style={{margin: '10px', float: "right"}} colored ripple onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events')}>
                        <Icon name="add" />
                    </FABButton>
                </Cell>
                    <DayPicker
                      canChangeMonth={true}
                      className="Birthdays"
                      renderDay={renderDay}
                    />
                </Grid>
            </div>
    );
}

当前的问题在子功能范围内renderDay范围内，该问题由与当天相关的事件的daypicker组件调用。当我尝试将历史属性推向历史属性时，它会出错，并说我无法从Undefined中读取属性"历史"，这是有道理的，因为我们没有将历史记录属性传递给该功能。

有人可以帮助我弄清楚如何修改该子功能，以便DIV上的onclick事件将用户带到该事件页面？

Answer 1

并说我无法从Undefined

中阅读财产"历史"

确保您的renderDay功能绑定到正确的this：

<DayPicker
  canChangeMonth
  className="Birthdays"
  renderDay={renderDay.bind(this)}
/>