子コンポーネントの親関数を呼び出す

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}/>