子コンポーネントから親コンポーネントへデータを渡す - 反応 - コールバック関数

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

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

あなたの質問に対する答えです。私はあなたの願望が解決されたことを願っています。あなたのChildコンポーネント、あなたが書かれている次のコードで

Answer 4

は：

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

問題は、SETSTATE機能の非同期行動にあります。これは、setStateを1行で呼び出すことができず、次の行でその更新が予想されることを意味します。 はちょうどこのように親コンポーネントの機能を呼び出すためにSETSTATEのコールバック関数を使用します。

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

同じことは、AppコンポーネントのhandleInput機能で起こっています。

Answer 5

2つのこと：あなたが新しい状態にアクセスしたい場合、あなたは this.setState({input: 'xxx'})後this.state.inputを使用していない

1. 。 Here is reason why not it.
2. this.passingProps = this.passingProps.bind(this)は、thisが現在のスコープであると定義されています。コンポーネントの機能でthisを使用する場合は、thisをバインドする必要があります。

はcodepen