Как использовать cleave.js в качестве поля Formik? - PullRequest
Новая
       38

Как использовать cleave.js в качестве поля Formik?

1 голос
/ 30 июня 2019

Я хотел бы использовать Cleave (подробности см. https://nosir.github.io/cleave.js/) в качестве Field внутри формы 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')) встраница указателя.SSCCE, обеспечивающий шаблон, но не более логический, предоставляется на https://gitlab.com/krichter/react-formik-with-cleave.

1 Ответ

1 голос
/ 30 июня 2019

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)
        }}
/>
...