Question

我的表单提交操作基本上在提交时验证。

它正如我所期望的那样工作，因为当我提交表单时，它会呈现错误。但问题发生在我提交时我不想做ajax请求，因为表单无效。我注意到在第一次提交时没有设置emailError（默认），但第二次提交状态包含正确的emailError设置为true。

我从反应文档中了解到，setState不可用，因为它正在等待处理。

我如何解决这个问题？

我的代码在

下面

import React, { Component } from 'react';
import isEmail from 'validator/lib/isEmail';

class formExample extends Component
{
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            emailError: false
        };

        this.register = this.register.bind(this);
        this.updateState = this.updateState.bind(this);
    }

    updateState(e) {
        this.setState({ email: e.target.value });
    }

    validateEmail() {
        if (!isEmail(this.state.email)) {
          console.log("setting state");
            this.setState({ emailError: true });
            return;
        }
        console.log(this.state);
        this.setState({ emailError: false });
    }

    register(event) {
        event.preventDefault();

            this.validateEmail();

            //only if valid email then submit further
    }

    render() {
        return (
              <div className="row">
                <div className="col-md-2 col-md-offset-4"></div>
                <div className="col-lg-6 col-lg-offset-3">
                  <form role="form" id="subscribe" onSubmit={this.register}>
                    <div className="form-group">
                        <input type="text" className="form-control" placeholder="Email..." name="email" value={this.state.email} onChange={this.updateState} />
                        <div className="errorMessage">
                            {this.state.emailError ? 'Email address is invalid' : ''}
                        </div>
                    </div>
                    <div className="input-group input-group-md inputPadding">
                        <span className="input-group-btn">
                            <button className="btn btn-success btn-lg" type="submit">
                            Submit
                            </button>
                        </span>
                    </div>
                  </form>
                </div>
              </div>
        );
    }
}

export default formExample;

Answer 1

在register中你调用validateEmail，但不返回任何内容，因此调用函数的其余部分。 setState是异步的！所以你不能指望其余的注册。

试试这个：

 validateEmail() {
         const isEmailError = !isEmail(this.state.email)
         this.setState({ emailError: isEmailError });
         return isEmailError;
    }

register(event) {
        if(this.validateEmail()){
           //ajax
        };
    }

其他方法将是：

validateEmail(ajaxCb) {
         const isEmailError = !isEmail(this.state.email)
         this.setState({ emailError: isEmailError }, ajaxCb);
    }

register(event) {
         function ajaxCb(){...} 
         this.validateEmail(ajaxCb) 
    }

Reactjs第一次提交表单和setState不能正常工作

1 个答案: