[英]Rendering new component on click in react
我正在练习做出反应并尝试通过点击按钮渲染新组件。 这里的第一页是电子邮件,我要渲染的组件包含密码页面。
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>
最简单的方法是在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 };
我通常会在状态中保留一些变量,并根据用户操作更改它们。
所以在你的情况下我已经存储了当前的活动页面,例如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>
您需要做的是使用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>
)
请看这里的react-router文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.