Phản ứng: Không thể gọi hàm bên trong thành phần con

Question

Tôi đang cố gắng gọi hàm bên trong thành phần con thông qua this.refs nhưng tôi tiếp tục nhận được lỗi rằng hàm này không tồn tại.

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

thành phần phụ huynh:

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

Tôi muốn để có được một số dữ liệu từ phần datarange thông qua chức năng onUpdate, và sau đó tôi muốn kích hoạt một chức năng bên trong TodayKpi mà fetches dữ liệu từ máy chủ. Bây giờ nó chỉ là console.log ("AAA") ;.

thành phần trẻ em:

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

Làm thế nào tôi nên thực hiện điều này?

Answer 1

Nếu bạn muốn chức năng/phương thức được gọi bên trong trẻ, bạn nên chuyển nó cho trẻ từ cha mẹ để bắt đầu. Một điều khác mà bạn cần thay đổi là onUpdate thành onChange, giả sử rằng bạn muốn theo dõi mọi thay đổi đối với trường đó. Cách khác là kiểm tra khi nào là onSubmit, nhưng có vẻ như bạn muốn nó xảy ra mỗi lần trường được cập nhật.

Answer 2

Vì lý do tôi chưa nắm bắt, Phản ứng không khuyến khích gọi phương thức con từ cha mẹ. Tuy nhiên, họ đã dịu dàng và cho chúng tôi một "lối thoát hiểm" cho phép điều đó. Bạn đã đúng khi nghĩ rằng ‘Refs’ là một phần của lối thoát hiểm đó. Nếu, giống như tôi, bạn đã đọc hàng chục bài viết tìm kiếm thông tin này, bạn sẽ được chuẩn bị kỹ lưỡng để hiểu được description of the escape hatch

Trong trường hợp của bạn, bạn có thể muốn thử một cái gì đó như thế này trong lớp KpisHeader của bạn.

Thay đổi dòng này

<TodayKpi ref="todayKpi" {...this.state}/> 

sử dụng một chức năng ref gọi lại một cái gì đó như thế này:

<TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/> 

hay, trước ES6, đây:

<TodayKpi 
    ref= 
    { 
     function (todayKpiComponent) 
     { 
      this.todayKpiComponent = todayKpiComponent  
     } 
    } 
    {...this.state} 
/> 

Sau đó, bạn sẽ có thể truy cập các phương thức thành phần todayKpi của bạn từ lớp KpisHeader của bạn như sau:

this.todayKpiComponent.someMethod(); 

Thật kỳ lạ, đối với tôi, bên trong chức năng gọi lại ref, ‘this’ là cửa sổ thay vì thành phần gốc. Vì vậy, tôi phải thêm

var self = this; 

phía trên phương thức hiển thị và sử dụng ‘self’ bên trong hàm gọi lại ref.

Trong trường hợp của tôi, tôi có một số lượng chưa xác định các thành phần con được tạo động, vì vậy tôi đặt từng thành một mảng. Tôi đã xóa mảng trong componentWillUpdate. Tất cả dường như đang hoạt động nhưng tôi có một cảm giác khó chịu, đặc biệt là sự phản ứng của React khi gọi các phương pháp của trẻ em.