react antd如何防止一份数据多次提交
作者：majinbo111
这篇文章主要介绍了react antd如何防止一份数据多次提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
如何防止一份数据多次提交呢？
方案
利用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);
react防重复点击方法、原理
原理
在请求数据一旦开始，直到本次请求结束之前，不能进行下一次点击，否则给与相应的提示
state中的初始设置：
state={
bool:true,
}
点击事件设置：
btn_click = async () => {
this.setState({
bool: false,
})
.
.
.
if(this.state.bool){
const value = await fetch.bbb({})
if (value.code == 1) {
} else {
}
this.setState({
bool: true,
})
}
}
解析
- 满足bool为true的情况，我们执行请求，如果发生多次点击的情况，方法开头设置的bool:false就会生效，防止在请求还没有完成的情况下进行下一次请求；
- 然后在请求完成之后，我们把Bool的状态变更多来，以便此次请求完成还可以进行下一次请求。
- 至于方法开头设置为false,请求还执行，是源于一个异步机制，在同一个方法中设置state又重新调用，state是来不及更新的，但是会在下一次调用该方法的时候执行。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。