javascript - 将更新的子状态转换为父状态

Question

我试图让父组件从子组件中检索一些信息。具体来说，让父组件检索子组件的当前状态。当我尝试下面的方法并尝试渲染更新的父级时，更新速度变慢。在片段中，它只是返回给我一个简单的脚本错误。有没有比我当前的方法更好的方法来检索 componentWillUpdate 上的子状态？谢谢!

class Parent extends React.Component {
   constructor(props) {
    super();
    this.state = {
      parentState: "default",
    }
    this.getChildState = this.getChildState.bind(this);
  }
  
  getChildState(childState) {
    this.setState({
      parentState: childState
    })
  }

  render() {
    return (
      <div>
        <h2>current parentState: {this.state.parentState}</h2>
        <Child getChildState={this.getChildState} />
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      onClick: 0,
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({
      onClick: this.state.onClick + 1
    })
  }
  
  componentWillUpdate(nextProps, nextState) {
    nextProps.getChildState(nextState.onClick);
  }

 render() {
    return (
      <div>
      <h2>current childState: {this.state.onClick}</h2>
      <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }   
}



ReactDOM.render(<Parent />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>

Answer 1

要更新父级的状态，当子级的状态更新时，您应该使用具有以下签名的 setState 方法:

setState(updater, [callback])

子组件的handleClick函数应如下所示:

handleClick() {
    this.setState({
      onClick: this.state.onClick + 1
    },()=>this.props.getChildState(this.state.onClick));
  }

当子状态更新时，这将调用 getChildState 函数。

有关 setState 的更多信息，您可以查看 React docs