如何使用 reactjs 解析从 child 到 parent 的数据？

Question

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

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

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

Child 组件用户

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

罪魁祸首是这行代码：

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

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

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

或者

<Home changeUser = {this.changeUName} />

顺便问一下，您是否考虑过将您的用户名存储到 redux 存储中？如果你还没有研究过，你一定要研究一下。在这种情况下，您可以将用户名存储在 redux 存储中，然后通过将其注入到应用程序（和其他组件）的道具中将其传递给应用程序（和其他组件）。

Answer 2

问题是您没有将收到的道具绑定到函数定义。请参阅以下代码段

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

如何使用 reactjs 解析从 child 到 parent 的数据？

How to parse data from child to parent using reactjs?

reactjs

react-redux