하위 구성 요소의 부모 함수 호출하기

Question

updateTime 함수를 부모 구성 요소에서 하위 구성 요소로 전달하려고합니다.

하위 구성 요소로드 완벽하게 정상적으로,하지만 handleApply가 호출 될 때, 그것은 this.props.updateTime 전화를 시도하지만 오류가 발생합니다 :

this.props.updateTime is not a function 

부모 구성 요소

class ParentComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     startDate: moment(), 
     endDate: moment().add(21, 'days'), 
     minDate: moment(), 
    }; 
    this.updateTime = this.updateTime.bind(this); 
    } 

    updateTime(startDate, endDate) { 
     this.setState({ 
     startDate: startDate, 
     endDate:endDate 
     }); 
    } 

    render() { 
    return (
     <div> 
      <DatePicker startDate={this.state.startDate} endDate={this.state.endDate} minDate={this.state.minDate} updateTime={this.props.updateTime}/> 
     </div> 
    ) 

하위 구성 요소 :

class DatePicker extends Component { 
    constructor(props) { 
    super(props); 
    this.handleApply = this.handleApply.bind(this); 
    } 


handleApply(event, picker) { 
    console.log("updating the time"); 
    this.props.updateTime(picker.startDate, picker.endDate); 
    } 


render() { 
    const {startDate, endDate, minDate, updateTime} = this.props; 

    let start = this.props.startDate.format('MMMM Do YYYY h:mm a'); 
    let end = this.props.endDate.format('MMMM Do YYYY h:mm a'); 
    let label = start + ' - ' + end; 

    let locale = { 
     format: 'MMMM do YYYY, h:mm:ss a', 
     separator: ' - ', 
     applyLabel: 'Apply', 
     cancelLabel: 'Cancel', 
     weekLabel: 'W', 
     customRangeLabel: 'Custom Range', 
     daysOfWeek: moment.weekdaysMin(), 
     monthNames: moment.monthsShort(), 
     firstDay: moment.localeData().firstDayOfWeek(), 
    }; 

    return (
     <div className="form-group"> 
     <div className="date-time-range-picker"> 
      <DatetimeRangePicker 
      timePicker 
      timePicker24Hour 
      showDropdowns 
      timePickerSeconds 
      locale={locale} 
      minDate = {this.props.minDate} 
      startDate={this.props.startDate} 
      endDate={this.props.endDate} 
      onApply={this.handleApply}> 
      <div className="input-group"> 
       <input type="text" className="form-control" value={label}/> 
       <span className="input-group-btn"> 
        <Button className="default date-range-toggle"> 
         <i className="fa fa-calendar"/> 
        </Button> 
       </span> 
      </div> 
      </DatetimeRangePicker> 
     </div> 
     <div className="error">{error} </div> 
     </div> 
    ); 
    } 

을

Answer 1

를 참조해야합니다.제대로 작동에서 부모 구성 요소 :

<DatePicker ... updateTime={this.props.updateTime}/> 

에 : 물론

<DatePicker ... updateTime={this.updateTime}/>