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

Answer 2

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

更新了渲染LoginPage的示例，通过道具将this.state.nameValue传递到子组件中：

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

将props / state传递给父组件/从父组件传递

2 个答案: