Rendering neue Komponente auf klicken in reagieren

Question

Ich übe reagieren und versuchen, eine neue Komponente auf einen Klick auf eine Schaltfläche zu rendern. Hier ist die erste Seite eine E-Mail und die Komponente, die ich rendern möchte, enthält die Passwortseite.

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

Die einfachste ist die Passwort-Seite bereits in Ihrem render(), vorbereitet haben und Ein-/Ausblenden es auf dem Bauteil Zustand abhängig, dass durch den etwas onClick Handler, mutiert ist, entlang diese Linien:

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

Was Sie tun müssen, ist die Verwendung von react-router zu machen und dann erstellen Sie separate Komponenten f oder jede Seite, die Sie anzeigen möchten. Das ist der bestmögliche Weg, um das zu erreichen, was Sie tun möchten.

Sie Komponenten wird so etwas wie

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> 
) 

Blick Blick auf die reagieren Router docs here

Answer 3

ich in der Regel einige Variablen in Zustand halten und sie auf eine Benutzeraktion auf Basis ändern.

Also in Ihrem Fall habe ich die aktuelle aktive Seite gespeichert z. B. usernamePage und wenn Benutzer klickt als nächstes ich zeige eine andere Seite in Ihrem Fall ist es 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>