reactjsを使用して子から親にデータを解析する方法は？

Question

こんにちは私は現在reactjsに取り組んでいますが、非常に基本的なレベルです。私は、親から子へ、そして親から子へのデータを解析しようとしていました。親は子どもが正しく働いていますが、子どもは親になりませんでした。

ここに全体のシナリオがあります... 私は3つのコンポーネント..アプリケーション、ホーム、ユーザーがあります。 AppコンポーネントからHomeコンポーネントへデータを解析したい。正しく動作している。 ホームコンポーネントには、入力フィールドがあります。何かを書いてボタンをクリックすると、入力値はAppコンポーネントに解析されます。アプリは私の親で、ホーム子..ですここで

は、コード... APPコンポーネント

constructor() { 
      super() 
      this.state = { 
       userName : ' ' 
      }; 
     } 
    changeUName(newName) { 
     this.setState({ 
      userName: newName 
     }); 
     console.log('user',newName); // Getting Undefined 
    } 

    render() { 

    return (

     <div className="App"> 

     <Home changeUser = {() => this.changeUName()} /> 
     </div> 
    ); 
    } 

子コンポーネントのユーザー

constructor(props) { 

     super(); 

     this.state = { 

      userName: '' 

     }; 
    } 
    changeUName(event) { 
     this.setState({ 
      userName: event.target.value 
     }); 
    } 

    nameChange() { 
     console.log(this.state.userName)   // If I write "Test" in input field. I will get the value here. 

     this.props.changeUser(this.state.userName); // Once I parse this value, I am getting undefined.. 
    } 

    render() { 
     return(        
      <div> 
       <h1> HOME Page</h1> 
       Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/> 
       <button onClick={() => this.nameChange()}>Click</button> 
      </div> 
     ) 
    } 

私はそれが間違って起こっている場所がわからないんです。私を案内してください。

<Home changeUser = {() => this.changeUName()} /> 

は、あなたが任意のパラメータなしchangeUNameを呼び出す：事前に感謝..

Answer 1

関数定義に受け取った小道具をバインドしていないということです。以下のスニペットを参照してください

class Parent extends React.Component { 
 
    constructor() { 
 
      super() 
 
      this.state = { 
 
       userName : ' ' 
 
      }; 
 
     } 
 
    changeUName(newName){ 
 
     this.setState({ 
 
      userName: newName 
 
     }); 
 
     console.log('user',newName); // Getting Undefined 
 
    } 
 

 
    render() { 
 

 
    return (
 

 
     <div className="App"> 
 

 
     <Home changeUser = {(value) => this.changeUName(value)} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
class Home extends React.Component { 
 
    constructor(props) { 
 

 
     super(); 
 

 
     this.state = { 
 

 
      userName: '' 
 

 
     }; 
 
    } 
 
    changeUName(event) { 
 
     this.setState({ 
 
      userName: event.target.value 
 
     }); 
 
    } 
 

 
    nameChange() { 
 
     console.log(this.state.userName)   // If I write "Test" in input field. I will get the value here. 
 
     
 
     this.props.changeUser(this.state.userName); 
 
    } 
 

 
    render() { 
 
     return(        
 
      <div> 
 
       <h1> HOME Page</h1> 
 
       Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/> 
 
       <button onClick={() => this.nameChange()}>Click</button> 
 
      </div> 
 
     ) 
 
    } 
 
    
 
} 
 

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

<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="app"></div>

もないと矢印機能

changeUName = (newName) =>{ 
     this.setState({ 
      userName: newName 
     }); 
     console.log('user',newName); // Getting Undefined 
    } 

と目的球を指定しての

<Home changeUser = {this.changeUName} /> 

Answer 2

犯人はこのコード行です。あなたの代わりに書く必要があります。

<Home changeUser = {name => this.changeUName(name)} /> 

それとも

<Home changeUser = {this.changeUName} /> 

ところで、あなたはReduxのストアにユーザー名を保存すると考えられてきましたか？あなたがまだそれを勉強していないなら、間違いなくそれを調べるべきです。 この場合、あなたはreduxストアにユーザー名を格納し、それを自分の小道具に注入してApp（および他のコンポーネント）に渡します。