如何使用 cleave.js 作为 Formik 字段？

Question

我想在 Formik 表单中使用 Cleave（有关详细信息，请参阅 https://nosir.github.io/cleave.js/）作为 Field。虽然文本输入等内置组件工作正常，但 Cleave 值更改不会被记录，并且如果表单中的任何其他值发生更改，则会进一步重置。

也许有一个很好的解释为什么这是个坏主意。我对以下设置无法开箱即用感到困惑。我希望该值不会被重置并存储在最终提交的表单 values 中。

我正在使用以下代码：

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import Cleave from 'cleave.js/react';

class App extends React.Component {

  render() {
    return <div>
      <Formik
        initialValues={{ title: "", price: 0 }}
        validate={values => {
          this.setState({ validationErrorDetails: null, errorMessage: "" });
          let errors = {title: "", price: ""};
          console.log("validate values", values);
          if (!values.price || isNaN(values.price)) {
            errors.price = "Price amount is required";
          }
          return errors;
        }}
        onSubmit={values => {
          alert(JSON.stringify(values));
        }}
        render={({ isSubmitting, handleSubmit, handleChange, handleBlur, values }) => (
          <Form>
            <table>
              <tbody>
                <tr>
                  <td>
                    <label>Title:</label>
                  </td>
                  <td>
                    <Field name="title" component="input" />
                  </td>
                  <td>
                    <ErrorMessage name="title" component="div" />
                  </td>
                </tr>
                <tr>
                  <td>
                    <label>Price:</label>
                  </td>
                  <td>
                    <Field name="price" component={() => <Cleave value={values.price}
                          options={{numericOnly: true, numeral: true, numeralThousandsGroupStyle: "thousand"}} />}/>
                  </td>
                  <td>
                    <ErrorMessage name="price" component="div" />
                  </td>
                </tr>
              </tbody>
            </table>
            <button type="submit" disabled={isSubmitting} className="confirm-button">
              Submit
            </button>
          </Form>
        )}/>
    </div>;
  }
}

export default App;

索引页上只有 ReactDOM.render(<App />, document.getElementById('root'))。 https://gitlab.com/krichter/react-formik-with-cleave.

提供了提供样板的 SSCCE，但未提供更多逻辑

Answer 1

Formik 不会像 <Field> 那样神奇地将 handleChange 绑定到 <Cleave> 元素。你需要像这样自己绑定它：

<Cleave value={values.price}
        options={...}
        onChange={handleChange}
/>

Cleave onChange 事件同时具有显示值和原始值（例如 {value: ,000, rawvalue: 1000}）。

我假设对于大多数实现，您希望将原始值传递给 Formik，因此您需要向 <Cleave> 组件添加自定义事件。

<Cleave value={values.price}
        options={...}    
        onChange={event => {
            const tempEvent = event
            tempEvent.target.value = event.target.rawValue
            handleChange(tempEvent)
        }}
/>

如何使用 cleave.js 作为 Formik 字段？

How to use cleave.js as a Formik field?

formatting

input

reactjs

formik

cleave