How to do the function anti-shake of antd input box

could you tell me how to do the anti-shake function of the input box in antd?
this is a test code I wrote

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input } from "antd";
import debounce from "lodash.debounce";

const FormItem = Form.Item;

const CustomizedForm = Form.create({
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  }
})(props => {
  const { getFieldDecorator } = props.form;
  return (
    <Form layout="inline">
      <FormItem label="Username">
        {getFieldDecorator("username", {
          rules: [{ required: true, message: "Username is required!" }]
        })(<Input />)}
      </FormItem>
    </Form>
  );
});

class Demo extends React.Component {
  state = {
    fields: {
      username: {
        value: "benjycui"
      }
    }
  };

  handleFormChange = changedFields => {
    if (changedFields["username"].validating === false) {
      debounce(() => {
        console.log("hahaha");
        this.setState(({ fields }) => ({
          fields: { ...fields, ...changedFields }
        }));
      }, 2000)();
    }
  };

  render() {
    const fields = this.state.fields;
    return (
      <div>
        <CustomizedForm {...fields} onChange={this.handleFormChange} />
        <pre className="language-bash">{JSON.stringify(fields, null, 2)}


< button onClick= {this.xxx} > click < / button >
< / div >
);
}
}
ReactDOM.render (< Demo / >, document.getElementById ("container"));)

Test address
https://codesandbox.io/s/wo2v.

Antd

Mar.28,2021

import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Form, Input } from 'antd'; const FormItem = Form.Item; const CustomizedForm = Form.create({ onFieldsChange(props, changedFields) { props.onChange(changedFields); }, mapPropsToFields(props) { return { username: Form.createFormField({ ...props.username, value: props.username.value, }), }; }, onValuesChange(_, values) { console.log(values); }, })((props) => { const { getFieldDecorator } = props.form; return ( <Form layout="inline"> <FormItem label="Username"> {getFieldDecorator('username', { rules: [{ required: true, message: 'Username is required!' }], })(<Input />)} </FormItem> </Form> ); }); class Demo extends React.Component { state = { fields: { username: { value: 'benjycui', }, }, }; handleFormChange = (changedFields) => { this.setState(({ fields }) => ({ fields: { ...fields, ...changedFields }, })); } render() { const fields = this.state.fields; return ( <div> <CustomizedForm {...fields} onChange={this.handleFormChange} /> <pre className="language-bash"> {JSON.stringify(fields, null, 2)}