點擊反應呈現新組件

我正在練習反應並試圖通過單擊按鈕呈現新組件。這裏第一頁是電子郵件，我想渲染的組件包含密碼頁面。點擊反應呈現新組件

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>

來源

2016-11-21 Gaurav Soni

您可以加入更多細節，請爲exampe，您通過道具（按鈕的onClick功能）傳遞函數什麼在它的代碼？ – MaieonBrix

最簡單的就是在你的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 };

來源

2016-11-21 08:43:41 mguijarr

我執行上述代碼，它顯示一些錯誤，但米無法調試它 –

錯誤：'意外的標記'在這一行.... {this.state.showPassword？ passwordPage：mainForm}; –

你是否在構造函數中用'{showPassword：false}'初始化'this.state'？ – mguijarr

你需要做的是使react-router使用，然後創建單獨的分量f或您想要顯示的每個網頁。這是實現你想要做的最好的方式。

你的組件看起來像

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

來源

2016-11-21 08:45:38

我通常把一些變量的狀態並改變它們基於用戶動作。

因此，在您的情況下，我已經存儲了當前活動頁面，例如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>

來源

2016-11-21 09:11:10 WitVault

點擊反應呈現新組件

回答

相關問題