时间戳

首页 > 解决方案 > React：无法将组件表单数据访问到另一个组件中

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

问题描述

我有两个组件，一个是 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>

            );
    }

标签： reactjs

解决方案

这是设计使然。阅读这篇关于 react 中的数据存储的文章，如果您决定仍要按照您的操作方式进行操作，您需要执行以下操作：

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

其次，创建一个更改变量的函数，就像您在家庭控制器中所做的那样。对你来说，这可能是这两个功能：

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

第三，将这些函数绑定到“父”组件，使其this始终指向父组件this（这必须在“父”的构造函数中完成）：

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

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

五、调用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>
    )
  }
}

推荐阅读