Question

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

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')
);

Answer 1

有几个问题。

1）你必须绑定constructor(){ super(); this.state={ text:'' } this.passingProps = this.passingProps.bind(this); }

this.setState

2）this.state.text是异步的，因此无法保证将this.props.getInput设置为您将其传递给this.props.getInput(newInput)时所需的值。你可以做到

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

或

FileOutputStream

解决该问题。

Answer 2

this不会自动绑定在passingProps函数中。尝试使用箭头函数语法来绑定它。

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

Answer 3

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')
);

以下是您的问题的答案。我希望你的问题得到解决。

Answer 4

在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 功能也发生了同样的事情。

Answer 5

你需要纠正它的两件事：

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

更改了codepen

Answer 6

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

将数据从子组件传递到父组件 - 通过回调函数进行响应

6 个答案: