传递 props/state to/from 父组件

Question

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

我希望用户输入他们的详细信息，然后点击提交，然后 store/pass 这些详细信息，以便其他组件可以使用它们。

如何在 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 中我有：

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

然而，当我 console.log(nameValue) 我得到未定义。有任何想法吗？如果 necessary/relevant

可以添加更多代码

Answer 1

您使用 state 和 props 的方法很好。你确定你不应该只是使用...

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

Answer 2

根据您的示例，您从未将 nameValue 传递给子组件。

更新了渲染 LoginPage 的示例，通过 props 将 this.state.nameValue 传递给子组件：

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

传递 props/state to/from 父组件

Passing props/state to/from parent component

javascript

state

reactjs