Using Formik
with Ant Design
, here is a simple setup.
You can see the entire code pasted here:
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);
So basically:
handleChange
is called correctly by the InputNumber
componentonblur
(after clicking away from the input number field)This seems like a bug, but I assume I am doing something wrong.
Any help is appreciated.
Code in action:
https://codesandbox.io/s/gallant-architecture-0c8p2
(The preview css seems to have a bug - in case you see multiple arrows, use the top one only)
You can use Formik's built in setFieldValue
function to define your own change handler for the input which will set the number value directly:
<InputNumber
id={count}
name={count}
type={"number"}
onChange={v => {
props.setFieldValue(count, v);
}}
onBlur={props.handleBlur}
defaultValue={props.initialValues[count]}
placeholder="Count"
/>
According to the docs it also has a third boolean argument to determine whether or not to run validation. So passing in true
after v
should trigger validation if validateOnChange
is enabled on the main Formik
component.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With