验证没有得到新的字段值

Question

我正在使用 react-final-form 创建注册和登录表单。我创建了名为验证器的文件，它具有 3 个功能：required、allowedEmails 和 validatePassword 长度。然后，如果我想为我的字段使用两个以上的验证器，我会将它们与validate={required} 或validate={this.composeValidators(required, validatePasswordLength)} 一起用于我的字段中。

我有 5 个字段：名字、姓氏、用户名、电子邮件和密码。一开始，当字段为空时，一切正常。他们都显示错误：

“此字段为必填项”

但是当我尝试在特定字段中输入一些值时，该字段的错误仍然存​​在。

这是我的项目https://codesandbox.io/s/forma-ktvjq的沙盒链接

这是我的验证器文件中的函数：

export function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
} 
export const required = v => {
    if(!v || v === ' '){
        return 'This field is requireddd';
    }
    return undefined;
}

export const allowedEmails = v =>{
    if (v === validateEmail) {
        return "email is not valid";
    }
    return undefined;
};

export const validatePasswordLength = v => {
         if(v){
          if(v.length<8){
          return "Password has to be atleast 8 charachters";

        }
         return "Password accepted";
    }

import validators, { required, validatePasswordLength, allowedEmails, validateEmail  } from '../../validators';
import LoginForm from '../LoginForm';
// import Container from 'react-bootstrap/Container';
// import Row from 'react-bootstrap/Row';
// import Col from 'react-bootstrap/Col';
import React, { Component }  from 'react';
import { Form, Field } from 'react-final-form';

import { InputPassword, InputEmail, InputUsername, InputFirstName, InputLastName, InputField} from '../.././../components/InputFields';
import Button from 'react-bootstrap/Button'
import { metaProperty } from '@babel/types';
import { withRouter } from 'react-router-dom';




class RegisterForm extends Component {
sleep = ms => new Promise(res => setTimeout(res, ms));

newPage = (newPage) => {
 this.props.history.push('/login');
};
handleSubmit = async (values,e) => {
  e.preventDefault()
  await this.sleep(300);
  console.log("values", values);

    this.newPage();

};

composeValidators = (...validators) => value => validators.reduce((error, validator) => error ||  validator(value),  undefined);
render(){
       return (
            <div>
            <h1>????  Register Form</h1>
            <br>
            </br>
            <br></br>
              <Form 
                onSubmit={this.handleSubmit.bind(this)}
                render={ ( { handleSubmit, values, submitting, meta }) => (
               <form onSubmit={handleSubmit}>
                       <Field
                        name="firstName"
                        component={InputField}
                        hintText="First Name"
                        floatingLabelText="First Name"
                        validate={required}
                        type="text"
                        />
                       <Field 
                        name="lastName"
                        component={InputField}
                        hintText="Last Name"
                        floatingLabelText="Last Name"
                        validate={required} 
                        type="text"
                        />
                       <Field 
                        name="username"
                        component={InputField}
                        hintText="UserName"
                        floatingLabelText="username"
                        validate={required}
                        type="text"
                       />
                       <Field 
                        name="password"
                        component={InputField}
                        hintText="Password"
                        floatingLabelText="Password"
                        validate={this.composeValidators(required, validatePasswordLength)}
                        type="password"
                        />
                        <Field 
                        name="email"
                        component={InputField}
                        hintText="email"
                        floatingLabelText="Email"
                        validate={this.composeValidators(required, allowedEmails)}
                        type="email"
                        />

                        <Button size="lg" type="submit">Register</Button>
                       </form>

                    ) } />  

        </div> 
    );


};
}



export default RegisterForm;

这也是我在 Field 中用作组件的第三方组件。

import { Form, Field } from 'react-final-form';
import LoginForm from '../containers/forms/LoginForm';
import RegisterForm from '../containers/forms/RegisterForm';
import './InputFields.css'



export const InputField = (props) => {
  console.log("PROOOPS ", props);
  return(
   <div>
  <InputGroup size="lg" className="mb-4">
  <FormControl 
     placeholder={props.floatingLabelText}
     type={props.input.type}


  />
  </InputGroup> 
  <div className="ValidatorStyle" >
  {props.meta.error && props.meta.touched && <span>{props.meta.error}</span>}
  </div>  
   </div>


)}

我没有收到任何错误，但字段值没有更新。

Answer 1

在InputField.js 中，您需要将输入道具传播到InputGroup，例如：

<InputGroup size="lg" className="mb-4" {...props.input}>

（包括value、onChange 等）