Question

我正在将Formik与yup验证一起使用，并且它运行良好。我想做的是要集成cleavejs以进行数字格式设置。问题是当我的formik字段更改为Cleave时，格式正在工作，但是它不验证表单。但是，当我更改为输入到Field时，验证有效，但格式无效。如何在不将Field更改为Cleave Hers我的代码的情况下将Cleave js格式传递到Formik字段中。

我尝试遵循cleave js文档及其工作，但对我的验证不起作用。根据cleave js文档，将输入更改为Cleave，但是我正在使用Field来进行formik yup验证。

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'
import { Formik, Field } from 'formik'

import {getvalidations} from './app' 
import Cleave from 'cleave.js/react'



export default function New (props){
const [state, setValue] = useState({
    rate:'',
});

return(
    <Formik
        initialValues={state}
        validationSchema={getvalidations}
        onSubmit={handleSubmit}
        render={formProps => {

        const { values, isSubmitting, errors, handleChange, handleBlur, handleSubmit, touched } = formProps

        return (
            <React.Fragment>
               div className="field">
                   <label className="label">Rate</label>
                   <div className="control">
                      <Field 
                          name="rate"
                          type="text" 
                          onChange={handleChange}
                          options={{numerical: true}}                                     
                            className={(() => {                                         
                              return touched.rate && errors.rate 
                              ? 'is-danger' : "";})()}
                      />
                      { touched.rate && errors.rate && <p className="help is-danger">{errors.rate}</p> }
                    </div>
            </div>

            </React.Fragment>
            )
        }}
    />);
  }

Answer 1

您可以创建一个自定义组件，然后使用组件属性将其传递到formik Field

例如

<Field name="name" label="Label" component={CustomInput} />

const CustomInputComponent = ({
  field, // { name, value, onChange, onBlur }
  form: { touched, errors }, ...props
}) => (
  <div>
    <Cleave
      placeholder="Enter your credit card number"
      options={{creditCard: true}}
      {...field} {...props} />
  </div>
);

有关更多信息，请参考link上的formik文档

如何将cleave js格式传递给Formik Field

1 个答案: