如何通過 React 中子組件的 onchange 事件在父 class 組件中調用 function？

Question

我有一個子組件，當我按下分頁欄中的2按鈕時，它會觸發 function pageChange ：

import React from "react";
import "antd/dist/antd.css";
import { Pagination } from "antd";

const Child = props => {
  function pageChange(pageNumber) {
    props.pageChange(pageNumber);
    console.log("Page child: ", pageNumber);
  }

  return (
    <div>
      <Pagination
        defaultCurrent={1}
        total={50}
        onChange={pageChange}
      />
    </div>
  );
};

export default Child;

這個孩子在 Parent class 組件中使用：

import React, { Component } from "react";
import Child from "./Child";

class Parent extends Component {
  state = {
    pageIndex: 3
  };

  componentDidMount() {
    this.getSetData(this.state.pageIndex);
  }

  getSetData(pageNumber) {
    this.setState({
      pageIndex: 5
    });
    console.log("Page state: ", this.state.pageIndex);
    console.log("pageNumber: ", pageNumber);
  }

  pageChange(pageNumber) {
    console.log("Page parent: ", pageNumber);
    this.getSetData(pageNumber);
  }

  render() {
    return (
      <div className="container">
        <Child pageChange={this.pageChange} />
      </div>
    );
  }
}

export default Parent;

但我有麻煩：

1. 當我按下2按鈕時，出現錯誤this.getSetData is not a function 。 如何從pageChange調用getSetData ？
2. 聲明this.setState({pageIndex: 9}); 在componentDidMount調用期間不起作用。 為什么？

解決了

1. 據我了解，沒有箭頭的 function 有它自己的this 。 所以必須使用

pageChange = pageNumber => {
    this.getSetData(pageNumber);
  };

代替

pageChange(pageNumber) {
    this.getSetData(pageNumber);
  }

2. setState是異步的，因此在控制台中查看更改對於從render調用很有用

  render() {
    console.log("render ", this.state.pageIndex);
    return (
      <div className="container">
        <Child pageChange={this.pageChange} />
      </div>
    );
  }

Answer 1

一個簡單的解決方案是使用 ES6 函數。 所以你不需要在構造函數中綁定它

 getSetData = (pageNumber) => {
    this.setState({
      pageIndex: 5
    });
    console.log("Page state: ", this.state.pageIndex);
    console.log("pageNumber: ", pageNumber);
  }

編輯 1

嘗試像這樣使用您的子組件。

<Child pageChange={() => this.pageChange()} />

運行示例

編輯 2

<Child pageChange={(e) => this.pageChange(e)} />

您沒有將參數傳遞給 pagechange function 這就是它沒有收到任何東西的原因。

試試這個，它肯定會奏效。 我已經在您的代碼中對此進行了測試。

Answer 2

可能您需要將 function 與this綁定才能使用this.setState 。 看這里了解更多

class Parent extends Component {
  constructor(props) {
    super(props);
    // binding here
    this.state = {
      pageIndex: 3
    };
    this.getSetData = this.getSetData.bind(this);
    this.getSetDataArrow = this.getSetDataArrow.bind(this);
    this.pageChange = this.pageChange.bind(this);
  }
  state = {
    // items: [{ a: 1, b: 2 }, { a: 3, b: 4 }],
    pageIndex: 3
  };

  componentDidMount() {
    this.getSetDataArrow(this.state.pageIndex);
    this.getSetData(this.state.pageIndex);
  }

  getSetData(pageNumber) {
    this.setState({
      pageIndex: 5
    });
    console.log("Page state: ", this.state.pageIndex);
    console.log("pageNumber: ", pageNumber);
  }
  getSetDataArrow = pageNumber => {
    this.setState({
      pageIndex: 4
    });
    console.log("Page state: ", this.state.pageIndex);
    console.log("pageNumber: ", pageNumber);
  };

  pageChange(pageNumber) {
    console.log("Page parent: ", pageNumber);
    // this.setState({
    //   pageIndex: 9
    // });
    // this.setState is not a function
    this.getSetDataArrow(pageNumber);
    this.getSetData(pageNumber);
    // this.getSetData is not a function
  }

  render() {
    return (
      <div className="container">
        <Child pageChange={this.pageChange} />
        {/* <Child pageChange={this.pageChange} items={this.state.items} /> */}
        {/* <Child2 pageChange={this.pageChange} /> */}
      </div>
    );
  }
}

導出默認父級；