Question

我有以下父/子组件。在Parent中，我有一个report对象，它被设置为父状态this.state.updateReport。然后通过道具将其发送给Child。在Child中，我将报告存储在this.state.childEditedReport中并对其进行更改。

class Parent extends React.Component {
    constructor(props) {
        super(props)

        this.handler = this.handler.bind(this);

        this.state = {
            updateReport: undefined
        };
    }


    updateParentState() {
        this.setState({
            updateReport: Report (report is coming from somewhere else)
        });
    }

    render() {
        return <Child report={this.props.updateReport} />
    }
}

class Child extends React.Component {
    constructor(props) {
      super(props);
      this.state = { childEditedReport: this.props.report }
    }

    //do some update on the report via `this.props.childEditedReport`

    render() {
        return (
            <div>
              Child
            </div>
        )
    }
}

如何将此已更改的报表对象作为父级this.state.updateReport的更新版本发送回Parent？

Answer 1

首先，您需要使用componentWillReceiveProps在子构造函数状态中存储来自父组件的report道具，然后您需要使用liftStateUp

我做了一个示例，每个代码旁边都有comments解释，这有助于了解电梯状态如何从Child工作到Parnet。

class App extends React.Component {

  constructor(props) {
    super(props)
   //this.handler = this.handler.bind(this);
    this.state = { 
          updateReport: 'Parent Data' 
          };
  }
  componentDidMount(){
    setTimeout(()=>{
        this.setState({updateReport: 'data receive from asyn call'})
    },2000); // let consider the asyn call takes a 2 sec.
  }
  //  updateParentState() {
    //    this.setState({
       //     updateReport: Report (report is coming from somewhere else)
     //   });
   // }

    update= (data) =>{
      this.setState({ updateReport: data}) // setting data that Received from child in parent State
    }

  render() {
    return (
      <div className="App">
        <h1>Parent Component </h1>
        Let's consider that the asyn takes 2 sec to set the date in the state
        updateReport: <b>{this.state.updateReport}</b>
        <Child report={this.state.updateReport} liftStateUp={this.update} />
      </div>
    );
  }
}

class Child extends React.Component {
    constructor(props) {
      super(props);
      this.state = { childEditedReport: 'empty' }
    }
    componentWillReceiveProps(nextProps){
      if(nextProps.report !== this.props.report){
        this.setState({childEditedReport: nextProps.report}) // setting the data in state
      }
    }

    //do some update on the report via `this.props.childEditedReport`
    someChanges = () =>{
      let update = this.state.childEditedReport; // updating new data
      this.props.liftStateUp(update);
    }

    render() {
        return (
            <div>
              <h1>Child Component</h1>
              Check ChildEditedReport State: <b>{this.state.childEditedReport}</b><br />
              <button onClick={()=>this.setState({ childEditedReport: 'New Data Received' })}>Make some Change</button> Step one<br /> 
              <button onClick={this.someChanges}>Lift State To Parent</button> Setp two
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

<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>

<div id='root'></div>

Answer 2

你不能，也不应该赢。 React适用于单向数据流的过程 - 将事物作为道具传递给孩子，但是没有办法将它们传递回来。相反，编写在父组件中进行更改的函数，并将此函数作为道具传递给您的孩子。然后，您的子组件可以根据需要调用该函数，它将更新父级的状态。然后，您的父母将使用新数据重新呈现孩子，这意味着您的子组件中的任何更改都将是不必要的。

更新子级中的父级状态对象，并将该对象发送回父级

2 个答案: