如何将cleave js格式传递给formik字段

Question

我正在使用带yup验证的Formik，它工作得很好。我想要做的是集成cleavejs来格式化，比如数字格式。问题是，当我的formik字段更改为Cleave时，格式是有效的，但是它不会验证表单。但是，当我更改为input to Field时，验证工作正常，但格式设置不起作用。如何将Cleave js格式传递到我的Formik字段中，而不将Field更改为Cleave她的代码。

我尝试遵循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文档