点击反应呈现新组件

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

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

点击反应呈现新组件

回答

相关问题