Question

我有两个组件，一个是Home组件，另一个是Category组件。首先将其重定向到使用路由的首页。在主页中，我有两个字段，用户名和密码。我填写了用户名和密码，然后单击提交，将其重定向到类别页面。我想访问类别组件中的用户名和密码字段。我无法访问类别组件中的那些字段。

render() {
return (
  <Router>
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <div className="navbar-header">
            <a className="navbar-brand" href="#">WebSiteName</a>
          </div>
          <ul className="nav navbar-nav">
            <li>
              <Link className="active" to="/">Home</Link>
            </li>
            <li>
              <Link to="/category">Category</Link>
            </li>
          </ul>
        </div>
      </nav>

      <hr />
      <Route exact path="/" component={Home} />
      <Route path="/category" component={Category} />
    </div>
  </Router>

)

 render() {
return (
  <form >
    <label>
      Name:
      <input type="text" name="username" value={this.state.username} onChange = {(event) => this.setState({username:event.target.value})}/>
    </label>
    <br/>
    <label>
      password:
      <input type="text" name="password" value={this.state.password} onChange = {(event) => this.setState({password:event.target.value})}/>
    </label>
    <br/>
    <input class="btn btn-primary" type="submit" onClick={(event) => this.handleClick(event)} value="Submit" />
  </form>
);
}  
}

constructor(props) {
            super(props);
            console.log("props", this.props);

            console.log("props....", props)
    }
    clickForSettings() {
            this.props.history.push('/settings');
    }

    render() {
            return (
                    <div>
                    <h1>This is Category Page{this.props.username}</h1>

                    </div>

            );
    }

Answer 1

这是设计使然。阅读this article on data storage in react，如果您决定仍然要按照操作方式进行操作，则需要执行以下操作：

首先，将所需的变量放在要共享数据的两个类的最低公共“父级”中。对您来说，这听起来像是您拥有路由器的班级。

第二，创建一个更改变量的函数，就像在家庭控制器中一样。对您来说，这可能是以下两个功能：

changeUserName(userName){ this.setState({ userName: userName }) }
changePassword(password){ this.setState({ password: password }) }

第三，bind这些函数指向“父”组件，因此this始终指向父对象的this（这必须在“父”组件的构造函数中完成））：

this.changeUserName = this.changeUserName.bind(this);
this.changePassword = this.changePassword.bind(this);

第四，使用timdorr解决方案here将函数向下发送到Home，并将变量向下发送到Category。

第五，在Home类的输入onChange函数中调用方法：

onChange(event) { this.props.changeUserName(event.target.value) }

现在，您应该可以使用Category查看this.props.userName组件上的更改，或者将其发送到Category组件。

上述方法的示例

export default class App extends Component {
  constructor() {
    this.state = {
      userName:""
    }
    this.changeUserName = this.changeUserName.bind(this);
  }
  changeUserName(userName) {
    this.setState({userName});
  }
  render() {
    return (
      <div>
        <Login userName={this.state.userName} changeUserName={this.changeUserName} />
        <NeedsUserName userName={this.state.userName} />
      </div>
    )
  }
}


export default class Login extends Component {
  changeUserName(event) {
    this.props.changeUserName(event.target.value);
  }
  render() {
    <input onChange={(event) => this.changeUserName(event)} value={this.props.userName}/>
  }
}

export default class NeedsUserName extends Component {
  render() {
    return (
      <h1>{this.props.userName}</h1>
    )
  }
}

React：无法访问组件表单数据到另一个组件

1 个答案: