向/从父组件传递道具/状态

Question

所以我有一个父组件和一个登录组件。

我希望用户输入其详细信息，然后单击“提交”，然后存储/传递这些详细信息，以便其他组件可以使用它们。

如何在React中做到最好？

例如，我的登录组件内部有此输入字段

 <p>
   <input type="text" id="playerName"  value={this.props.nameValue} onChange={this.props.handleNameChange}/>
</p>

然后，我想将输入的值传递给父组件

我的父组件中有此功能：

handleNameChange(event){
    this.setState({nameValue: event.target.value})
  };

作为回报，我有：

  return (
      <div>
        <LoginPage handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)}/>
      </div>
    )

但是，当我console.log（nameValue）我得到未定义。 有任何想法吗？ 可以在必要/相关时添加更多代码

Answer 1

您使用状态和道具的方法很好。 您确定不应该只是在使用...

console.log(this.state.nameValue);

这是一个有效的例子

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            nameValue:''
        };
    }
    render() {
        return (
            <Child handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)} nameValue={this.state.nameValue} />
        );
    }
    handleNameChange(e) {
        this.setState({
            nameValue: e.target.value
        });
    }
    handleClick() {
        alert(this.state.nameValue);
    }
}

class Child extends React.Component {
    render() {
    return (
        <div>
            <input type="text" value={this.props.nameValue} onChange={this.props.handleNameChange} />
          <button onClick={this.props.handleClick}>Click Me!</button>
        </div>
    );
  }
}

JSFiddle在这里。

Answer 2

从您的示例中，您永远不会将nameValue传递给子组件。

更新了呈现LoginPage示例，通过this.state.nameValue将this.state.nameValue传递到子组件中：

return (
  <div>
    <LoginPage
      handleClick={this.handleClick.bind(this)}
      handleNameChange={this.handleNameChange.bind(this)}
      nameValue={this.state.nameValue}
    />
  </div>
)