如何使用reactjs将数据从子项解析到父项？

嗨我目前正在reactjs，但在非常基本的水平。我试图解析从父母到孩子以及孩子到父母的数据。父母对孩子正常工作，但是我不能。如何使用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> 
     ) 
    }

我不知道它是怎么了。请指导我。在此先感谢..

来源

2017-04-06 R. Dey

的可能的复制[如何传递数据从子组件到其在ReactJS中的父代？]（http://stackoverflow.com/q uestions/38394015/how-to-pass-data-from-child-component-to-parent-in-reactjs） –

谢谢@Shubham。我看过这篇文章。自昨天以来尝试了很多，但仍显示未定义的价值。 –

问题是你没有绑定收到的函数定义的道具。请参见下面的代码片段

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} />

来源

2017-04-06 05:59:17

谢谢..太棒了。是的，我犯了这个愚蠢的错误。 Aagain和再次。再一次感谢你。它现在正在正常工作.. –

罪魁祸首是这行代码：

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

你叫changeUName不带任何参数。而应该写：

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

或者

<Home changeUser = {this.changeUName} />

顺便问一下，你有没有考虑存储你的用户名进入终极版商店？如果你还没有研究过，那么你一定要研究它。在这种情况下，您应该将用户名存储在redux存储中，并将其注入到应用程序（以及其他组件）中，方法是将其注入到它们的道具中。

来源

2017-04-06 05:57:29

谢谢@Antoine。这是工作。但告诉我一件事，如果我重复使用这些数据，那么我该怎么做......？这意味着我想重复使用我的输入值来进一步处理，例如在另一个子组件中解析或在页面上打印，那么我应该怎么做......？ –

感谢它正在工作..我做到了.. –

@ R.Dey欢迎:)关于你的第一个问题，你的意思是你想显示在其他组件的用户名？在这种情况下，您可以将userName作为组件的道具从App传递给目标孩子。然而，在这种情况下，我会强烈建议你在连接时使用redux，所以你不必实际转发userName：你可以直接'连接'目标子组件。 –

如何使用reactjs将数据从子项解析到父项？

回答

相关问题