react antd如何防止一份數(shù)據(jù)多次提交

更新時(shí)間：2023年10月23日 11:06:42 作者：majinbo111

這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

如何防止一份數(shù)據(jù)多次提交呢？

方案

利用antd 的button loading 方式實(shí)現(xiàn)，在點(diǎn)擊提交按鈕后，先讓按鈕 loading，等待接口返回結(jié)果了，再做相應(yīng)的處理，最終把loading 去除。

（當(dāng)然 disabed 也可實(shí)現(xiàn)同樣的效果，個(gè)人建議是使用loading，交互會(huì)好一些）

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防重復(fù)點(diǎn)擊方法、原理

原理

在請(qǐng)求數(shù)據(jù)一旦開(kāi)始，直到本次請(qǐng)求結(jié)束之前，不能進(jìn)行下一次點(diǎn)擊，否則給與相應(yīng)的提示

state中的初始設(shè)置：

state={
   bool:true,
}

點(diǎn)擊事件設(shè)置：

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的情況，我們執(zhí)行請(qǐng)求，如果發(fā)生多次點(diǎn)擊的情況，方法開(kāi)頭設(shè)置的bool:false就會(huì)生效，防止在請(qǐng)求還沒(méi)有完成的情況下進(jìn)行下一次請(qǐng)求；
然后在請(qǐng)求完成之后，我們把Bool的狀態(tài)變更多來(lái)，以便此次請(qǐng)求完成還可以進(jìn)行下一次請(qǐng)求。
至于方法開(kāi)頭設(shè)置為false,請(qǐng)求還執(zhí)行，是源于一個(gè)異步機(jī)制，在同一個(gè)方法中設(shè)置state又重新調(diào)用，state是來(lái)不及更新的，但是會(huì)在下一次調(diào)用該方法的時(shí)候執(zhí)行。