React JS：在父组件中调用子组件方法（使用打字稿反应）答案

【问题标题】：React JS : Calling Child component method within parent component (React with typescript)React JS：在父组件中调用子组件方法（使用打字稿反应）
【发布时间】：2019-08-10 22:31:57
【问题描述】：

我正在尝试创建一个自定义数字选择器组件，并尝试将其添加到需要的组件中。但是当我试图在 Parent 组件中获取数字选择器值时，我得到的是旧值。有人可以帮我解决这个问题吗？

数字选择器组件

import * as React from "react";

interface IState {
  value: number;
}

interface IProps {
  setValue(val: number): void;
}

class NumberPicker extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: 0
    };
  }

  public doDecrement = () =>
    // DECREMENT CODE
    {
      if (this.state.value < 1) {
        console.log("LESS THAN O");
      } else {
        this.setState({
          value: this.state.value - 1
        });
        this.props.setValue(this.state.value);
      }
    };

  public doIncrement = () =>
    // INCREMENT CODE
    {
      this.setState({
        value: this.state.value + 1
      });
      this.props.setValue(this.state.value);
    };

  public handleChange = (
    e: React.ChangeEvent<HTMLInputElement> // CHANGE HANDLER
  ) => {
    const val = parseInt(e.target.value);
    this.setState({ value: val });
  };

  public render() {
    return (
      <div>
        <button
          onClick={this.doDecrement}
          className="fa fa-minus fa-inverse fa-2x"
        />
        <input
          type="text"
          className="number"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <button
          onClick={this.doIncrement}
          className="fa fa-plus fa-inverse fa-2x"
        />
      </div>
    );
  }
}
export default NumberPicker;

父组件代码

import * as React from "react";
import NumberPicker from "./NumberPicker";

interface IState {
  val: number;
}

interface IProps {}

class Parent extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      val: 0
    };
  }

  handleVal = (value: number) => {
    this.setState({ val: value }, () => console.log(this.state.val));
  };

  render() {
    return (
      //Some fields along with the below numberpicker
      <NumberPicker setValue={this.handleVal} />
    );
  }
}

export default Parent;

我也尝试过使用 setState 的回调函数，但它似乎不起作用。父组件总是显示旧值。如何在父组件中获取 NumberPicker 的更新值？帮助将不胜感激！

【问题讨论】：

标签： reactjs typescript callback setstate react-component

【解决方案1】：

React 的 setState 是异步的，因此 this.props.setValue 函数将在 setState 更新您在子 Numberpicker 组件中的状态之前被调用。这就是为什么将旧值传递给父组件的原因。

相反，您可以在setState 的回调函数中调用this.props.setValue。

 public doIncrement = () =>
    // INCREMENT CODE
    {
      this.setState({
        value: this.state.value + 1
      }, () => {
              this.props.setValue(this.state.value);
         });

    };

public doDecrement = () =>
    // DECREMENT CODE
    {
      if (this.state.value < 1) {
        console.log("LESS THAN O");
      } else {
        this.setState({
          value: this.state.value - 1
        }, () => {
              this.props.setValue(this.state.value);
           });
      }
    };

【讨论】：

完美！非常感谢

【解决方案2】：

setState 不是同步函数。因此，当您从父级调用回调时，您正在使用旧状态值调用它，因为将来某个时候会设置新值。您可以使用设置为 state 的相同值调用回调：this.state.value - 1 或 this.state.value + 1。它应该按预期工作。我还建议您阅读thinking in react，以更好地了解您应该在哪里保持状态。

【讨论】：

感谢您的推荐

【解决方案3】：

不要在回调中使用状态来传递值，你可以这样做：-

  handleChange = (
    e: React.ChangeEvent<HTMLInputElement> // CHANGE HANDLER
  ) => {
    const val = parseInt(e.target.value);
    // this.setState({ value: val });
    this.props.setValue(val);
  };

希望对你有帮助！

【讨论】：