Question

我正在练习反应，并尝试通过点击按钮渲染新组件。这里的第一页是电子邮件，我要渲染的组件包含密码页。

  class App extends React.Component {
 passwordpage(){
    return(
      <form>
        <div className="mainapp">
          <h2> Password</h2>
          <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
          <div>
            <button type="submit" className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    );
  };

  render() {
    return (
      <form>
        <div className="mainapp">
          <h2>Email  Id</h2>
          <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
          <div>
            <button type="submit" onClick={this.props.passwordpage} className="loginbutton">Next</button>
          </div>
        </div>
      </form>

    );
  }
}

 ReactDOM.render(<App/>,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 1

最简单的方法是在render()中准备好密码页面，并显示/隐藏它取决于组件状态，由onClick处理程序进行变异，这些都是这样的：

showPasswordPage() {
  this.setState({showPassword: true });
}

render() {
  const passwordPage = (<form>
    <div className="mainapp">
      <h2> Password</h2>
      <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
      <div>
        <button type="submit" className="loginbutton">Next</button>
      </div>
    </div>
  </form>);

  const mainForm = (<form>
    <div className="mainapp">
      <h2>Email  Id</h2>
      <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
      <div>
        <button type="submit" onClick={this.showPasswordPage} className="loginbutton">Next</button>
      </div>
    </div>
  </form>);

  return { this.state.showPassword ? passwordPage : mainForm };

Answer 2

我通常会将一些变量保留在状态中，并根据用户操作进行更改。

因此，在您的情况下，我已存储当前有效页面，例如usernamePage，当用户点击下一步时，我会在您的案例中显示另一页，passwordPage。

class App extends React.Component {
  
  constructor(props) {
    super(props);

    this.state = {
      isPasswordPage : false,
      isUsernamePage : true,
      username       : "",
      password       : ""
    };

    this.enablePasswordPage  = this.enablePasswordPage.bind(this);
  }

  enablePasswordPage() {
    this.setState({
      isPasswordPage : true,
      isUsernamePage : false
    });
  }
  
  passwordpage(){
    return(
      <form>
        <div className="mainapp">
          <h2> Password</h2>
          <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
          <div>
            <button type="submit" className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    );
  };

  render() {
    var usernameComp = (
      <form>
        <div className="mainapp">
          <h2>Email  Id</h2>
          <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
          <div>
            <button onClick={this.enablePasswordPage} className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    );
    
    return (
      <div>
        { this.state.isUsernamePage ? usernameComp : null }
        { this.state.isPasswordPage ? this.passwordpage() : null }
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

您需要做的是使用react-router，然后为要显示的每个页面创建单独的组件。这是实现目标的最佳方式。

您的组件看起来像

class Home extends React.Component {
    render() {
    return (
        <div>{this.props.children}</div>
    )
  }
}

class App extends React.Component {

  handleClick = (e) => {
     e.stopPropagation();
     browserHistory.push('/passwordPage');
  }
  render() {
    return (
      <form>
        <div className="mainapp">
          <h2>Email  Id</h2>
          <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
          <div>
            <button className="loginbutton" onClick={this.handleClick}>Next</button>
          </div>
        </div>
      </form>

    );
  }
}

class PasswordPage extends React.Component {
    render() {
    return (
        <form>
        <div className="mainapp">
          <h2> Password</h2>
          <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
          <div>
            <button type="submit" className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    )
  }
}

ReactDOM.render(
   <Router history={browserHistory}>
   <Route path="/" component={Home}>
    <IndexRoute component={App} />
    <Route path="/passwordPage" component={PasswordPage} />
   </Route>
   </Router>
)

查看react-router文档 here

点击时渲染新组件做出反应

3 个答案: