当使用formy-react时,React不会更新状态

时间:2017-07-07 23:31:44

标签: javascript validation reactjs formsy-react

我正在使用formsy-react来处理输入字段的验证。问题是我无法更新状态。我在formy github页面上跟踪了示例,验证工作正常,但问题是状态不正确。他们总是落后一步(或几步),我不知道为什么......

我在setState函数上使用回调来在验证时实现一些自定义逻辑,而且该部分无法正常工作。

我遇到用户输入电子邮件的情况。用户输入电子邮件后,我会检查电子邮件是否已经注册。如果用户已经在系统中,我创建新的输入组件(密码类型),如果不是,我创建新的"输入类型的电子邮件"成分

由于需要所有表单元素,我添加了一个验证检查,检查是否添加了新密码或电子邮件组件以及是否有任何数据。

要更新状态,我使用了Forms表单API调用onChange(),这部分因未知原因无效。

有人知道问题出在哪里吗?

这是我正在使用的代码:

组件输入(短路版)

changeValue(event) {

    this.setValue(event.currentTarget.value);

},
render() {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true
    // when the value is empty and the required prop is
    // passed to the input. showError() is true when the
    // value typed is invalid
    const className = (this.props.className || "col-md-4" );
    const classValidationName =this.isValid() ? 'valid' : this.showError() ? ' invalid' : null;

    // An error message is returned ONLY if the component is invalid
    // or the server has returned an error message
    const errorMessage = this.getErrorMessage();

    return (
        <div className= {className}>
            <div className="md-form">
                <span className="prefix"><i className={this.props.icon}></i></span>
                <input
                    className={classValidationName}
                    name={this.props.name}
                    id={this.props.id}
                    type={this.props.inputType}
                    value={this.getValue() || ""}
                    onChange={this.changeValue}
                    onBlur={this.props.controlFuncOnBlur}
                    placeholder={this.props.placeholder}
                    required={this.props.required}
                    pattern={this.props.pattern}
                />
                <label id={this.props.name + 'Label'} htmlFor={this.props.name} data-error={errorMessage}
                       data-success={this.props.successMessage}>{this.props.title}
                </label>
            </div>
        </div>
    );
}

容器(短版)

handleEmailBlur(event) {
    const self = this;

    if (this.refs.email.isValid) {
        axios.get('/api/checkIsUserRegistrated', {
            params: {
                email: this.state.email
            }
        })
            .then(function (response) {
                if (self.state.userExist !== response.data[0].userExist) {
                    self.setState({
                        userExist: response.data[0].userExist,
                        confirmEmail: "",
                        password: ""

                    });
                    self.forceUpdate();
                }

            })
            .catch(function (error) {
                console.log(error);
            });
    }
}

enableButton = () => {

    this.setState({
        formValid: true
    });
}

disableButton = () => {
    this.setState({
        formValid: false
    });
}
saveCurrentValuesToStates = (getCurrentValues, isChanged) => {
    console.log(this);
    this.setState(getCurrentValues, ()=> {
        if (this.state.formValid && (this.state.password || this.state.confirmEmail)){
            this.setState({
                canSubmitForm: true
            });
        }
        else{
            this.setState({
                canSubmitForm: false
            });
        }
    });
}

 <Formsy.Form className="booker-form" ref="form"
   onChange={this.saveCurrentValuesToStates} onValid={this.enableButton} onInvalid={this.disableButton}>

                            <SingleInput
                            inputType={'email'}
                            icon={'icon-Email'}
                            id={'email'}
                            name={'email'}
                            title={'E-mail'}
                            ref="email"
                            controlFuncOnBlur={this.handleEmailBlur}
                            content={this.state.email}
                            errorMessage={'Incorect E-Mail address'}
                            required
                            validations="isEmail"
                            validationError="This is not a valid email"
                        />
                        {(this.state.userExist === '0') ?
                            <SingleInput
                                inputType={'email'}
                                icon={'icon-Email'}
                                id={'confirmEmail'}
                                name={'confirmEmail'}
                                title={'Confirm your E-mail'}
                                content={this.state.confirmEmail}
                                required
                                validations="equalsField:email"
                                validationError="Emails don't match"

                            />
                            : null}
                        {(this.state.userExist === '1') ?
                            <SingleInput
                                inputType={'password'}
                                icon={'icon-Padlock'}
                                id={'password'}
                                name={'password'}
                                title={'Enter your password'}
                                content={this.state.password}
                                required

                            />
                            : null}

0 个答案:

没有答案