将数据从子组件传递到父组件 - 反应 - 通过回调函数答案

【问题标题】：passing data from child to parent component - react - via callback function将数据从子组件传递到父组件 - 反应 - 通过回调函数
【发布时间】：2019-10-13 03:54:41
【问题描述】：

通过回调函数将数据从子组件传递到父组件但不知何故它不起作用。我在这里做错了什么？将数据从子组件传递到父组件 - 反应 - 通过回调函数

https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010

这是代码

class App extends React.Component{
    constructor(props){
      super(props);
      this.state={
        input:'this is the input for now'
      }
   //this.handleInput=this.handleInput.bind(this);   
    }

    handleInput(x){
      this.setState({
        input:x
      });
      alert(this.state.input);
    }

  render(){
    return(
      <div>
        <h1>Passing props from Child to Parent Component</h1>
        <Child getInput={this.handleInput} />
        here's the input: {this.state.input}
        </div>
    );
  }
 }

class Child extends React.Component{
  constructor(){
    super();
    this.state={
      text:''
        }
    }
  passingProps(e){
    var newInput=e.target.value;
    //alert(newInput);
   this.setState({
     text:newInput
    });
  this.props.getInput(this.state.text);
  }

  render(){
    return(
      <div>
      <input type="text" placeholder="please input a name..." onChange={this.passingProps} />

        </div>

    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

有几个问题。

1) 你必须绑定passingProps

constructor(){
    super();
    this.state={
      text:''
    }
    this.passingProps = this.passingProps.bind(this);
}

2) this.setState 是异步的，因此不能保证在将 this.state.text 传递给 this.props.getInput 时将其设置为您想要的值。你可以这样做

this.props.getInput(newInput)

或

this.setState({ text: newInput }, () => {
  this.props.getInput(this.state.text);
})

解决这个问题。

【讨论】：

谢谢。这真的很有帮助。我不知道 setState 是异步的
@DonovanM 嗨，我遇到了类似的问题，但这并不能解决我的问题
@JohnAnisere 你有什么问题？添加新问题可能会更容易
@DonovanM 如果子类是函数而不是类怎么办？你能帮我吗codesandbox.io/s/exciting-architecture-qkldm?file=/src/…

【解决方案2】：

class App extends React.Component{
constructor(props){
  super(props);
  this.state={
    input:'this is the input for now'
  }
  this.handleInput=this.handleInput.bind(this);   
}

handleInput(event){
  let value = event.target.value;
  this.setState({
    input:value
  });
}

render(){
   return(
     <div>
       <h1>{this.state.input}</h1>
       <Child getInput={this.handleInput} />
     </div>
   );
  }
}

 class Child extends React.Component{
   constructor(){
      super(props);
}

render(){
   return(
     <div>
     <input type="text" placeholder="please input a name..." onChange={this.props.getInput} />
    </div>

     )
   }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

这是您问题的答案。希望您的问题得到解决。

【讨论】：

【解决方案3】：

在您的Child 组件中，您编写了以下代码：

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({
     text:newInput
  });
  this.props.getInput(this.state.text);
}

问题是由于 setState 函数的异步行为。这意味着您不能在一行上调用 setState 并期望在下一行进行更新。使用 setState 的回调函数来调用父组件的函数，如下：

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({ text: newInput }, () => {
     this.props.getInput(this.state.text);
  })
}

App 组件的 handleInput 函数中也发生了同样的事情。

【讨论】：

【解决方案4】：

this 不会自动绑定到您的 passProps 函数中。尝试使用箭头函数语法来绑定它。

passingProps = e => {
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({
    text:newInput
  });
  this.props.getInput(this.state.text);
}

【讨论】：

【解决方案5】：

你需要纠正的两件事：

如果你想访问新的状态，你不要使用this.state.input之后 this.setState({input: 'xxx'})。 Here is reason why not it.
this.passingProps = this.passingProps.bind(this) 定义了 this 是当前范围。在组件函数中使用this时，需要绑定this。

已更改codepen

【讨论】：

【解决方案6】：

您可以在 parent 中创建一个接受一些数据的方法，然后将接收到的数据设置为父状态。然后将此方法作为道具传递给孩子。现在让方法接受子状态作为输入，然后让方法将接收到的子状态设置为父状态。

【讨论】：