반응 일 선택 도구 및 반응 라우터 v4를 사용하여 다른 페이지에 연결

Question

이 달의 이벤트를 나열하는 캘린더를 만들기 위해 this example을 활용하려고하지만이 부분은 작동하지만 아직 파악하지 못한 것은 사용자가 이벤트 이름을 클릭하면 해당 이벤트 페이지로 이동할 수 있도록하는 방법입니다.

예를 들어, 생일 중 하나를 클릭하면 생일에 대한 자세한 정보를 볼 수있는 이벤트 페이지로 이동합니다.

현재 내 이벤트 페이지에서이 기능을 사용하여 렌더링되는 :

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> 
    ); 
} 

현재의 문제는 일에 관련된 이벤트를 얻는 DayPicker 구성 요소에 의해 호출되는 하위 기능, renderDay에 있습니다. 히스토리 속성을 푸시하려고하면 오류가 발생하여 undefined에서 'history'속성을 읽을 수 없다는 것을 알 수 있습니다. 히스토리 속성을 해당 함수에 전달하지 않았기 때문에 의미가 있습니다.

해당 하위 함수를 수정하여 div의 onClick 이벤트가 사용자를 해당 이벤트 페이지로 안내하도록 도와 줄 수 있습니까?

Answer 1

와 내가

정의되지 않은

에서 재산 '역사'를 읽고 당신의 renderDay 기능이 올바른 this에 바인딩되어 있는지 확인 할 수 있다고 말한다 :

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