无法控制Antd-Mobile Switch UI

Question

我想基于确认警报来更新ui，如何基于确认警报的“确定”和“取消”按钮来实现ui更新。

import React, { PureComponent } from 'react';
import { Switch, Modal } from 'antd-mobile';
import { createForm } from 'rc-form';
import PropTypes from 'prop-types';

const { alert } = Modal;

class RcSwitch extends PureComponent {
  showAlert = checked => {
    const { form } = this.props;
    const alertInstance = alert(
      'Disable autopay?',
      'This will no longer monitor your bills for late payments',
      [
        {
          text: 'Cancel',
          onPress: () => {
            console.log('cancel');
            form.setFieldsValue({
              Switch: !checked,
            });
          },
          style: 'default',
        },
        {
          text: 'Disable',
          onPress: () => {
            console.log('ok');
            form.setFieldsValue({
              Switch: checked,
            });
          },
        },
      ]
    );
    setTimeout(() => {
      console.log('auto close');
      alertInstance.close();
    }, 500000);
  };

  render() {
    const { form } = this.props;
    const { getFieldProps } = form;
    return (
      <Switch
        {...getFieldProps('Switch', {

          initialValue: true,
          valuePropName: 'checked',
          // onChange: val => console.log(val),
        })}
        onClick={checked => {
          // set new value
          if (checked) {
            console.log('checked', checked);
            form.setFieldsValue({
              Switch: checked,
            });
          }
          if (!checked) {
            this.showAlert(checked);
          }
        }}
      />
    );
  }
}


const MySwitch = createForm()(RcSwitch);

export default MySwitch;

如果我单击“开关”，则确认警报应该出现，但ui当时不应更新，基于“确定”或“取消”按钮，我想更新ui。但是现在，只要我单击开关，就可以进行ui更新。