Question

我在要传递给子组件的父组件中有一个函数。单击子组件时，它正在调用已传递的父函数。我希望能够在子组件中知道何时完成此功能，然后做出响应。

在这种情况下，当我尝试使用回调函数时，它们似乎会立即响应（在父函数实际完成之前）。有什么办法吗？我应该改组流程吗？

这是示例代码：

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Child from "./child.js";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      happy: "no"
    };
    this.doSomething = this.doSomething.bind(this);
    this.waitUp = this.waitUp.bind(this);
  }
  waitUp(callback) {
    setTimeout(
      function() {
        this.doSomething();
      }.bind(this),
      3000
    );
    if (callback) {
      callback();
    }
  }

  doSomething() {
    this.setState({
      happy: "true"
    });
  }

  render() {
    return (
      <div>
        <Child parentFunction={this.waitUp} />
        <div>Am I happy ? {this.state.happy}</div>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word: "Something"
    };
    this.callBack = this.callBack.bind(this);
    this.doSomethingElse = this.doSomethingElse.bind(this);
  }

  callBack() {
    this.setState({ word: "Something else !!!" });
  }

  doSomethingElse() {
    const { parentFunction } = this.props;

    parentFunction(this.callBack);
  }

  render() {
    const { parentFunction } = this.props;

    return (
      <div>
        <h1 onClick={() => this.doSomethingElse()}>{this.state.word}</h1>
      </div>
    );
  }
}

export default Child;

Answer 1

这可以做到：

  waitUp(callback) {
    setTimeout(
      function() {
        this.doSomething();
        if (callback) {
          callback();
        }
      }.bind(this),
      3000
    );
  }

您未在setTimeout中调用回调，而在该调用下发现调用了该回调，由于您想知道setTimeout在您的孩子中何时完成并调用其回调，因此该调用不起作用。< / p>

这里是Ripl with it working

Answer 2

您可以将回调传递给doSomething组件中的Parent函数，并在设置状态后调用它。 PS：setState接受第二个参数，即设置状态后调用的回调函数

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Child from "./child.js";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      happy: "no"
    };
    this.doSomething = this.doSomething.bind(this);
    this.waitUp = this.waitUp.bind(this);
  }
  waitUp(callback) {
    setTimeout(
      function() {
        this.doSomething(callback);
      }.bind(this),
      3000
    );
  }

  doSomething(callback) {
    this.setState({
      happy: "true"
    }, callback);
  }

  render() {
    return (
      <div>
        <Child parentFunction={this.waitUp} />
        <div>Am I happy ? {this.state.happy}</div>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word: "Something"
    };
    this.callBack = this.callBack.bind(this);
    this.doSomethingElse = this.doSomethingElse.bind(this);
  }

  callBack() {
    this.setState({ word: "Something else !!!" });
  }

  doSomethingElse() {
    const { parentFunction } = this.props;

    parentFunction(this.callBack);
  }

  render() {
    const { parentFunction } = this.props;

    return (
      <div>
        <h1 onClick={() => this.doSomethingElse()}>{this.state.word}</h1>
      </div>
    );
  }
}

export default Child;

Answer 3

我假设您希望将孩子的state.word设置为“其他”，而将父母的state.happy设置为“是”，这都将在3秒钟后发生。

在Parent.waitUp中，您在执行setTimeout之后正在运行callback()，但是设置超时会立即发生，并且代码将继续运行并调用回调。您想要做的是将callback()调用移至超时回调中-这是3秒钟后将实际执行的代码。

换句话说，

waitUp(callback) {
  setTimeout(
    function() {
      this.doSomething();
      if (callback) {
        callback();
      }
    }.bind(this),
    3000
  );
}

使用从父代传递过来的函数来响应子代的回调

3 个答案: