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

Question

您好，我目前正在研究 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>
        )
    }

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

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

Answer 2

罪魁祸首就是这行代码：

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

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

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

或者

<Home changeUser = {this.changeUName} />

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