react在使用antd-mobile里面的复选框组件时，重复快速点击复选框会出来这个问题

Question

import React, { Component } from 'react';
import home_banner from './img/home_banner.png';
import home_map from './img/home_map.png';
import img_1 from './img/1.png';
import img_2 from './img/2.png';
import img_3 from './img/3.png';
import img_4 from './img/4.png';
import img_5 from './img/5.png';
import img_6 from './img/6.png';
import './index.less';
import { Button, Flex, List, Checkbox } from 'antd-mobile';
import Addr from '@/components/Addr';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { saveAddr } from '@/store/home/action';
const CheckboxItem = Checkbox.CheckboxItem;

// import TabBarExample from '@/components/TabBarExample'
class Home extends Component {

  static propTypes = {
    homeData: PropTypes.object.isRequired,
    saveAddr: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);
    this.state = {
      alertStatus: true,
      alertTip: <h1>aaaa</h1>,
    };
  }

  componentDidMount() {
    // this.autoFocusInst.focus();
  }

  handleClick = () => {
    this.inputRef.focus();
  }

  // 关闭弹款
  closeAlert = () => {
    this.setState({
      alertStatus: false,
      alertTip: <h1>aaaa</h1>,
    })
  }

  onChange = (value) => {
    this.props.saveAddr(value, 'class_type');
  }
  onSubChange = (value,index,el) => {
    let sub_type = [...this.props.homeData.sub_type];
    sub_type[index] = el.target.checked ? value : '';
    this.props.saveAddr(sub_type, 'sub_type');
  }

  showAddr () {
    const { addr, class_type } = this.props.homeData;
    const subs7 = ['物理','生物','化学','技术','历史','地理','政治'];
    const subs6 = ['物理','生物','化学','历史','地理','政治'];
    if (this.props.homeData.addr === '') {
      return <span className="select-province" onClick={this.props.saveAddr.bind(this, true, 'addr_model')}>选择省份</span>
    } else {
      return (
        <div>
          <div>
            <span className="select-province">{addr}</span>
            <span className="edit-province" style={{marginLeft: 10}} onClick={this.props.saveAddr.bind(this, true, 'addr_model')}>点击修改</span>
          </div>
          <div>
          <List className="sub-wrap" style={addr==='北京'?{}:{display:'none'}}>
            <Flex wrap="wrap" justify="center">
              <CheckboxItem className="my-radio" key={0} checked={class_type === '文科'} onChange={() => this.onChange('文科')} name="addr">文科</CheckboxItem>
              <CheckboxItem className="my-radio" key={1} checked={class_type === '理科'} onChange={() => this.onChange('理科')} name="addr">理科</CheckboxItem>
            </Flex>
          </List>
          <List className="sub-wrap" style={addr==='浙江'?{}:{display:'none'}}>
            <Flex wrap="wrap" style={{padding:'0 30px'}}>
              {
                subs7.map((item,index) => {
                  return <CheckboxItem className="my-check" key={index} onChange={(el) => this.onSubChange(item,index,el)} name="check">{item}</CheckboxItem>
                })
              }
            </Flex>
          </List>
          <List className="sub-wrap" style={addr==='天津'?{}:{display:'none'}}>
            <Flex wrap="wrap" style={{padding:'0 30px'}}>
              {
                subs6.map((item,index) => {
                  return <CheckboxItem className="my-check" key={index} onChange={(el) => this.onSubChange(item,index,el)} name="check">{item}</CheckboxItem>
                })
              }
            </Flex>
          </List>
          </div>
        </div>
      );
    }
  }
  
  render() {
    return (
      <div className="home">
        <img className="banner" src={home_banner} alt=""/>
        <img className="map" src={home_map} alt=""/>
        {this.showAddr()}
        <input className="scope" type="text" placeholder="请输入成绩分数"/>
        <Button className="start" type="primary">开始模拟</Button>
        <div className="line"></div>
        <Flex className="card-wrap first-card-wrap" wrap="wrap">
          <Flex.Item className="card"><img src={img_1} alt=""/></Flex.Item>
          <Flex.Item className="card"><img src={img_2} alt=""/></Flex.Item>
          <Flex.Item className="card"><img src={img_3} alt=""/></Flex.Item>
        </Flex>
        <Flex className="card-wrap">
          <Flex.Item className="card"><img src={img_4} alt=""/></Flex.Item>
          <Flex.Item className="card"><img src={img_5} alt=""/></Flex.Item>
          <Flex.Item className="card"><img src={img_6} alt=""/></Flex.Item>
        </Flex>

        <Addr/>
      </div>
    );
  }
}
export default connect(state => ({
  homeData: state.homeData,
}), {
  saveAddr
})(Home)

Answer 1

等待大神解答