如何设置显示onChange错误?

时间:2018-12-20 15:24:56

标签: javascript react-native

我正在学习本机反应。我正在使用教程。它显示了提交时来自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>
                );
        }
}

0 个答案:

没有答案