Рендеринг нового компонента при нажатии в реале

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

Что вам нужно сделать, это использовать в 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> 
) 

Посмотрите на реакцию маршрутизаторов документы here

Answer 3

Я обычно держу некоторые переменные в состоянии и изменить их на основе действий пользователя.

Так что в вашем случае я сохранил текущую активную страницу, например, 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>