如何使用reactjs解析从孩子到父母的数据？

Posted 2023-02-21

【中文标题】如何使用reactjs解析从孩子到父母的数据？

【英文标题】：How to parse data from child to parent using reactjs?

【发布时间】：2017-08-31 23:18:12

【问题描述】：

您好，我目前正在研究 reactjs，但处于非常基础的水平。我试图解析从父母到孩子以及从孩子到父母的数据。父母对孩子工作正常，但孩子对父母我不能。

这是整个场景... 我有 3 个组件.. 应用程序、主页和用户。 从 App 组件到 Home 组件我想解析数据..它工作正常。 在 Home 组件中，我有一个 Input 字段。如果我写一些东西并单击按钮，那么输入值将解析为 App 组件。 App 是我的父母，Home 是孩子..

这里是代码... 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>
        )
    

我不知道哪里出错了。请指导我。提前谢谢..

【问题讨论】：

How to pass data from child component to its parent in ReactJS?的可能重复

谢谢@Shubham。我看过这个帖子。从昨天开始尝试了很多，但仍然显示未定义的值。

【参考方案1】：

问题是您没有将收到的道具绑定到函数定义。见下面sn -p

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

【讨论】：

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

【参考方案2】：

罪魁祸首就是这行代码：

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

你调用changeUName 没有任何参数。你应该改写：

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

或者

<Home changeUser = this.changeUName />

顺便问一下，您是否考虑过将您的用户名存储到 redux 存储中？如果你还没有研究过，你绝对应该研究一下。 在这种情况下，您会将用户名存储在 redux 存储中，并通过将其注入到它们的 props 中将其传递给 App（和其他组件）。

【讨论】：

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

@R.Dey 不客气 :) 关于您的第一个问题，您的意思是要在其他组件中显示用户名吗？在这种情况下，您会将 userName 作为组件的道具从 App 传递给目标子项。但是在这种情况下，我强烈建议您将 redux 与 connect 结合使用，这样您就不必实际转发 userName：您可以直接“连接”目标子组件。

感谢您的建议。是的，我已经看到了。但是我才刚刚开始学习。所以在我对 react 有明确的想法之前，我不能去 redux。 :)