我正在学习本机反应。我正在使用教程。它显示了提交时来自firebase的错误,没有任何问题。正在设置isInvalid并禁用提交按钮。如果passwordOne为空白或密码不匹配,如何更改时显示错误消息?
class SignUpFormBase extends Component {
constructor(props) {
super(props)
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
const { username, passwordOne } = this.state;
this.props.firebase
.doCreateUserWithEmailAndPassword(username,passwordOne)
.then(authUser => {
this.setState({ ...INITIAL_STATE});
this.props.history.push(ROUTES.HOME);
}).catch(error => {
this.setState({ error });
});
event.preventDefault();
}
onChange = event => {
this.setState({[event.target.name]: event.target.value});
}
render() {
const {
username,
passwordOne,
passwordTwo,
error,
} = this.state
const isInvalid =
passwordOne !== passwordTwo ||
passwordOne === '' || username === ''
return (
<div>
<form onSubmit={this.onSubmit}>
<input
name="username"
value={username}
onChange={this.onChange}
type="text"
placeholder="Email Address"
/>
<input
name="passwordOne"
value={passwordOne}
onChange={this.onChange}
type="password"
placeholder="Password"
/>
<input
name="passwordTwo"
value={passwordTwo}
onChange={this.onChange}
type="password"
placeholder="Confirm Password"
/>
<button disabled={isInvalid} type="submit">Sign Up</button>
{error && <p>{error.message}</p>}
</form>
</div>
);
}
}