Question

我想在Cleave表单中使用Field（有关详细信息，请参见https://nosir.github.io/cleave.js/）作为Formik。尽管诸如文本输入之类的内置组件可以正常工作，但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不会像handleChange那样神奇地将<Cleave>绑定到<Field>元素。您需要这样自己绑定它：

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

Cleave onChange事件同时具有显示值和原始值（例如{value: $1,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字段？

1 个答案: