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

Question

我正在使用带有 yup 验证的 Formik，它工作得很好。我想做的是我想集成 cleavejs 来格式化数字格式。问题是当我的 formik Field 更改为 Cleave 时格式正在工作但它不验证表单。但是，当我更改为 Field 输入时，验证有效但格式无效。我如何才能将 Cleave js 格式传递到我的 Formik Field 中而不更改 Field 以 Cleave Hers 我的代码。

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

How can I pass cleave js format to formik Field

reactjs

yup

formik

cleave