如何使用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> 
     ) 
    } 

我不知道它是怎麼了。請指導我。在此先感謝..

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 
    } 

的funtion並調用它像

<Home changeUser = {this.changeUName} /> 

Answer 2

罪魁禍首是這行代碼：

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

你叫changeUName不帶任何參數。而應該寫：

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

或者

<Home changeUser = {this.changeUName} /> 

順便問一下，你有沒有考慮存儲你的用戶名進入終極版商店？如果你還沒有研究過，那麼你一定要研究它。 在這種情況下，您應該將用戶名存儲在redux存儲中，並將其注入到應用程序（以及其他組件）中，方法是將其注入到它們的道具中。