react antdデータの複数回のコミットを防止
19186 ワード
データの複数回のコミットを防止するにはどうすればいいですか?
イニシアチブ
antdのbutton loading方式で実現し,コミットボタンをクリックした後,ボタンloadingを先に譲り,インタフェースが結果を返すのを待ってから,対応する処理を行い,最終的にloadingを除去する.(もちろんdisabedも同様の効果を実現できますが、個人的にはloadingを使うことをお勧めします.インタラクションがいいです)
イニシアチブ
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);