クリックで新しいコンポーネントをレンダリングすると反応する

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を利用し、その後、別のコンポーネントFを作成することですまたは表示したいPageのそれぞれを選択します。それはあなたがしたいことを達成するための最良の方法です。

あなたのコンポーネントは、私は通常の状態でいくつかの変数を保持し、ユーザーアクションに基づいてそれらを変更

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>