1

我试图利用这个例子来创建一个列出当月事件的日历，我有这部分工作，但我还没有弄清楚如何制作它以便用户可以点击事件名称，它会将他们带到该事件页面。

因此，根据该示例，如果他们单击其中一个生日，则会将他们带到一个活动页面，在那里他们可以看到有关该生日的更多信息。

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

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 组件调用。当我尝试推送到历史属性时，它会出错并说我无法从未定义中读取属性“历史”，这是有道理的，因为我们没有将历史属性传递给该函数。

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

4

1 回答 1

1

并说我无法从 undefined 读取属性“历史”

确保您的renderDay函数绑定到正确的this：

<DayPicker
  canChangeMonth
  className="Birthdays"
  renderDay={renderDay.bind(this)}
/>
于 2017-12-02T09:08:31.517 回答