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

罪魁祸首就是这行代码：

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

您在没有任何参数的情况下致电changeUName。你应该写：

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

或者

<Home changeUser = {this.changeUName} />

顺便问一下，您是否考虑过将您的用户名存储到redux商店？如果你还没有研究过，你一定要仔细研究它。在这种情况下，您将用户名存储在redux存储中，并通过将其注入到其道具中将其传递给App（和其他组件）。

Answer 2

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

＆＃13;

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'));

＆＃13;

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

＆＃13;

或者用箭头功能指定功能

 changeUName = (newName) =>{
        this.setState({
            userName: newName
        });
        console.log('user',newName);  // Getting Undefined
    }

并将其称为

<Home changeUser = {this.changeUName} />

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

2 个答案: