如何防止一份数据多次提交呢?
方案
利用antd 的button loading 方式实现,在点击提交按钮后,先让按钮 loading,等待接口返回结果了,再做相应的处理,最终把loading 去除。(当然 disabed 也可实现同样的效果,个人建议是使用loading,交互会好一些)
import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16,
},
};
class Demo extends React.Component {
formRef = React.createRef();
// create a flag
state = {
submitLoading = false;
};
onGenderChange = value => {
this.formRef.current.setFieldsValue({
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
});
};
onFinish = values => {
// set the flag is true
this.setState({submitLoading: true}, () => {
console.log(values);
//after request api, set the flag is false
this.setState({submitLoading: false});
})
};
onReset = () => {
this.formRef.current.resetFields();
};
onFill = () => {
this.formRef.current.setFieldsValue({
note: 'Hello world!',
gender: 'male',
});
};
render() {
let { submitLoading } = this.state;
return (
<Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
<Form.Item
name="note"
label="Note"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="gender"
label="Gender"
rules={[
{
required: true,
},
]}
>
<Select
placeholder="Select a option and change input text above"
onChange={this.onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
>
{({ getFieldValue }) =>
getFieldValue('gender') === 'other' ? (
<Form.Item
name="customizeGender"
label="Customize Gender"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
) : null
}
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit" loading={submitLoading}>
Submit
</Button>
<Button htmlType="button" onClick={this.onReset} loading={submitLoading}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={this.onFill} loading={submitLoading}>
Fill form
</Button>
</Form.Item>
</Form>
);
}
}
ReactDOM.render(<Demo />, mountNode);