React Formik 不适用于数字输入

Question

将 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 似乎有一个错误 - 如果您看到多个箭头，请只使用最上面的那个）

Answer 1

我不熟悉 antd，但我看到当我将 InputNumber 更改为 Input 时它起作用了。

基本上，InputNumber 会返回值而不是像 Input 这样的对象。

来自 antd 文档：

Input -> onChange -> function(e) 这是 SyntheticEvent

InputNumber -> onChange -> function(value: number | string) 只是一个值

Answer 2

您可以使用 Formik 的内置 setFieldValue 函数为输入定义您自己的更改处理程序，这将直接设置数字值：

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

根据the docs它还有第三个布尔参数来确定是否运行验证。因此，如果在主要 Formik 组件上启用了 validateOnChange，那么在 v 之后传入 true 应该会触发验证。

React Formik 不适用于数字输入

React Formik does not work with number input

javascript

reactjs

antd

formik