登录 React 后关闭模态
Close modal after login React
我必须在模式中使用我的 Login.js 组件:在第一个中,模式不应在登录后关闭;在第二个中,它必须关闭。
我想弄清楚如何处理第二种情况:我尝试了这个但它不起作用:我在父级中编写了一个 closeAfterLogin
方法并尝试在子级中触发它。
Login.js:
import React from 'react';
import { Meteor } from 'meteor/meteor';
export default class LoginForm extends React.Component {
constructor() {
super();
this.login = this.login.bind(this);
}
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
})
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin
}
}
render() {
return (
<div>
<form onSubmit={this.login}>
<div className="form-group">
<input type="email" ref="email" className="form-control" id="login-form-input-email" placeholder="email"/>
</div>
<div className="form-group">
<input type="password" ref="password" className="form-control" id="login-form-input-password" placeholder="mot de passe"/>
</div>
<button type="submit" className="btn btn-primary">Connexion</button>
</form>
<p>Pas encore de compte ? <a onClick={this.props.toggleHasAnAccount}>Inscrivez-vous</a></p>
</div>
);
}
}
父组件:
import React from 'react';
import Modal from 'react-modal';
import { Meteor } from 'meteor/meteor';
import LoginForm from './LoginForm';
import SignUpForm from './SignUpForm';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
Modal.setAppElement('#app')
export default class LoginModalParent extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false,
hasAnAccount: true
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.toggleHasAnAccount = this.toggleHasAnAccount.bind(this);
this.closeAfterLogin = this.closeAfterLogin.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({modalIsOpen: false});
}
toggleHasAnAccount() {
this.setState(prevState => ({
hasAnAccount: !prevState.hasAnAccount
}));
};
closeAfterLogin() {
this.setSate({modalIsOpen: false});
console.log(this.state.modalIsOpen);
}
render() {
return (
<div>
<Modal
isOpen={this.props.modalIsOpen}
onRequestClose={this.props.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<button onClick={this.props.closeModal} type="button" className="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{ this.state.hasAnAccount ? (
<LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
<SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
}
</Modal>
</div>
);
}
}
有什么想法吗?
您没有调用 closeAfterLogin
属性函数。在名称后添加 ()
以调用它。
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
});
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin();
}
}
您需要调用 closeAfterLogin 方法
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
})
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin()
}
}
在关闭按钮的 onClick 属性中,您将 closeModal
方法称为 this.props.closeModal
,这应该如下所示,因为 closeModal
方法是在 [=15] 中声明的=] 组件本身
render() {
return (
<div>
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<button onClick={this.closeModal} type="button" className="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{ this.state.hasAnAccount ? (
<LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
<SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
}
</Modal>
</div>
);
}
我必须在模式中使用我的 Login.js 组件:在第一个中,模式不应在登录后关闭;在第二个中,它必须关闭。
我想弄清楚如何处理第二种情况:我尝试了这个但它不起作用:我在父级中编写了一个 closeAfterLogin
方法并尝试在子级中触发它。
Login.js:
import React from 'react';
import { Meteor } from 'meteor/meteor';
export default class LoginForm extends React.Component {
constructor() {
super();
this.login = this.login.bind(this);
}
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
})
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin
}
}
render() {
return (
<div>
<form onSubmit={this.login}>
<div className="form-group">
<input type="email" ref="email" className="form-control" id="login-form-input-email" placeholder="email"/>
</div>
<div className="form-group">
<input type="password" ref="password" className="form-control" id="login-form-input-password" placeholder="mot de passe"/>
</div>
<button type="submit" className="btn btn-primary">Connexion</button>
</form>
<p>Pas encore de compte ? <a onClick={this.props.toggleHasAnAccount}>Inscrivez-vous</a></p>
</div>
);
}
}
父组件:
import React from 'react';
import Modal from 'react-modal';
import { Meteor } from 'meteor/meteor';
import LoginForm from './LoginForm';
import SignUpForm from './SignUpForm';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
Modal.setAppElement('#app')
export default class LoginModalParent extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false,
hasAnAccount: true
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.toggleHasAnAccount = this.toggleHasAnAccount.bind(this);
this.closeAfterLogin = this.closeAfterLogin.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({modalIsOpen: false});
}
toggleHasAnAccount() {
this.setState(prevState => ({
hasAnAccount: !prevState.hasAnAccount
}));
};
closeAfterLogin() {
this.setSate({modalIsOpen: false});
console.log(this.state.modalIsOpen);
}
render() {
return (
<div>
<Modal
isOpen={this.props.modalIsOpen}
onRequestClose={this.props.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<button onClick={this.props.closeModal} type="button" className="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{ this.state.hasAnAccount ? (
<LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
<SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
}
</Modal>
</div>
);
}
}
有什么想法吗?
您没有调用 closeAfterLogin
属性函数。在名称后添加 ()
以调用它。
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
});
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin();
}
}
您需要调用 closeAfterLogin 方法
login(e){
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
Meteor.loginWithPassword({email}, password, err =>{
console.log('Login Callback', err);
})
if (!!this.props.closeAfterLogin) {
this.props.closeAfterLogin()
}
}
在关闭按钮的 onClick 属性中,您将 closeModal
方法称为 this.props.closeModal
,这应该如下所示,因为 closeModal
方法是在 [=15] 中声明的=] 组件本身
render() {
return (
<div>
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<button onClick={this.closeModal} type="button" className="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{ this.state.hasAnAccount ? (
<LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
<SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
}
</Modal>
</div>
);
}