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.