將數據從子級傳遞到父級組件-反應-通過回調函數

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）您必須綁定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);
})

解決該問題。

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

這是您問題的答案。 希望你的難題解決。

Answer 3

this不會自動綁定到您的passingProps函數中。 嘗試使用箭頭函數語法將其綁定。

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

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

您需要糾正兩件事：

1. 如果要訪問新狀態，則不要在this.setState({input: 'xxx'})之后使用this.state.input 。 這就是為什么不這樣做的原因。
2. this.passingProps = this.passingProps.bind(this)被定義什么this是目前的范圍。 當你使用this在組件的功能， this需要被約束。

更改了密碼筆

Answer 6

您可以在父級中創建一個接受某些數據的方法，然后將接收到的數據設置為父級狀態。 然后將此方法作為道具傳遞給孩子。 現在，讓該方法接受子狀態作為輸入，然后讓該方法將接收到的子狀態設置為父狀態。