Ant Design Input失去焦点

我们在开发中经常遇到表单提交，各种表单验证，虽然觉得很麻烦但又是不可避免的。这次react项目中用到了Ant Design框架，Ant Design的Form组件提供了很多便捷的api大大加快了我们的开发效率。

Input组件

Ant Design的Input组件中给我们提供了一个onChange方法这个方法和原生js中的input方法相似，只要输入框的数据改变就会触发，但是有时候我们并不想要让他失去焦点时再触发，这时我们就需要用到失焦的方法onBlur。

import React from "react"
import { Form, Input } from 'antd';
const Demo = () => {
  const [form] = Form.useForm();
    return (
    <Form form={form} name="control-hooks" >
      <Form.Item
        name="note"
        label="Note"
      >
        <Input onBlur={e => form.setFieldsValue({note: e.target.value.replace(/^[0-9]*/g,"")})}/>
      </Form.Item>
    </Form>
  );
};

export default Demo

通过form组件提供的setFieldsValue方法，当失焦后我们可以很方便的改变input的value。