2

我正在使用带有 yup 验证的 Formik，它工作得很好。我想要做的是我想集成 cleavejs 来格式化数字格式。问题是当我的 formik 字段更改为 Cleave 时，格式可以正常工作，但不能验证表单。但是，当我更改为 Field 的输入时，验证工作正常，但格式不起作用。我怎样才能将 Cleave js 格式传递到我的 Formik 字段而不更改字段以 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>
            )
        }}
    />);
  }
4

1 回答 1

3

您可以创建一个自定义组件并将其传递给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>
);

有关更多信息，请参阅链接中的 formik 文档

于 2019-06-12T04:38:11.240 回答