React Formik не работает с вводом номера - PullRequest
Новая
       30

React Formik не работает с вводом номера

0 голосов
/ 01 октября 2019

Используя Formik с Ant Design, вот простая настройка.

Вы можете увидеть весь вставленный здесь код: 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import { Formik } from "formik";
import { Form, Input, InputNumber } from "antd";

function App() {
  const name = "name";
  const count = "count";

  return (
    <div className="App">
      <h1>Formik Testing</h1>

      <Formik
        initialValues={{ count: 32, name: "sd" }}
        validate={async values => {
          console.log("Validate", values);
          return {
            count: `Value ${values.count} is not valid.`
          };
        }}
        onSubmit={(values, actions) => {
          console.log(values);
        }}
        render={props => {
          return (
            <div>
              <Form>
                <Form.Item help={props.errors && props.errors[name]}>
                  <Input
                    id={name}
                    name={name}
                    type={"text"}
                    onChange={v => {
                      console.log("Text change ", v);
                      props.handleChange(v);
                    }}
                    onBlur={props.handleBlur}
                    defaultValue={props.initialValues[name]}
                    placeholder="Name"
                  />
                </Form.Item>
                <Form.Item help={props.errors && props.errors[count]}>
                  <InputNumber
                    id={count}
                    name={count}
                    type={"number"}
                    onChange={v => {
                      console.log("Number change ", v);
                      props.handleChange(v);
                    }}
                    onBlur={props.handleBlur}
                    defaultValue={props.initialValues[count]}
                    placeholder="Count"
                  />
                </Form.Item>
              </Form>
            </div>
          );
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Итак, в основном:

  • handleChange правильно вызывается компонентом InputNumber
  • проверка не срабатывает при изменении числового поля
  • проверка запускается при текстовом полеизменения
  • проверка запускается со значением по умолчанию, когда onblur (после щелчка в поле ввода номера)

Это похоже на ошибку, но я предполагаю, что я что-то делаюнеправильно.

Любая помощь приветствуется.

Код в действии:

https://codesandbox.io/s/gallant-architecture-0c8p2

(Предварительный просмотр css, кажется,есть ошибка - если вы видите несколько стрелок, используйте только верхнюю)

Ответы [ 2 ]

1 голос
/ 01 октября 2019

Вы можете использовать встроенную функцию Formik setFieldValue, чтобы определить свой собственный обработчик изменений для входа, который будет непосредственно устанавливать числовое значение: 

           <InputNumber
                    id={count}
                    name={count}
                    type={"number"}
                    onChange={v => {
                      props.setFieldValue(count, v);
                    }}
                    onBlur={props.handleBlur}
                    defaultValue={props.initialValues[count]}
                    placeholder="Count"
                  />

В соответствии с документами itтакже имеет третий логический аргумент, чтобы определить, следует ли запускать проверку. Таким образом, передача true после v должна запустить проверку, если validateOnChange включен на главном Formik компоненте.

1 голос
/ 01 октября 2019

Я не знаком с antd, но я вижу, что когда я изменяю InputNumber на Input, это работает.

По сути, InputNumber возвращает вам значение вместообъект типа Input.

из antd документы:

Input -> onChange -> function(e), что является SyntheticEvent

InputNumber -> onChange -> function(value: number | string) просто значение

...