React:无法调用子组件内的函数

Question

我试图通过this.refs调用子组件内的函数,但我不断收到此函数不存在的错误.

Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function

父组件:

class KpisHeader extends React.Component {

  constructor() {
    super();
    this.onUpdate = this.onUpdate.bind(this);
  }
    render(){
        return <div>
            <DateRange ref="dateRange" onUpdate={this.onUpdate}/>
            <TodayKpi ref="todayKpi" {...this.state}/>
          </div>;
    }

  onUpdate(val){

      this.setState({
          startDate: val.startDate,
          endDate: val.endDate
      }, function(){
        this.refs.todayKpi.loadTodaysKpi();
      });
  } 
 }

我想通过函数onUpdate从DateRange组件中获取一些数据,然后我想在TodayKpi中触发一个从服务器获取数据的函数.现在它只是console.log("AAA");.

子组件:

class TodayKpi extends React.Component {
    constructor() {
        super();
        this.loadTodaysKpi = this.loadTodaysKpi.bind(this);
    }

    render(){
        console.log(this.props.startDate + " "+ this.props.endDate);
        return <div className="today-kpi">


          </div>;
    }
    loadTodaysKpi(){
        console.log("AAAA");
    }
}

我该如何实现呢？

Answer 1

如果您希望在子级内部调用该函数/方法，则应该首先将其从父级传递给子级。您需要更改的另一件事是onUpdate，onChange假设您想要跟踪该字段的每个更改。另一种选择是检查何时onSubmit，但听起来您希望每次更新字段时都发生这种情况。