react antd-mobile ActionSheet+tag实现多选方式

  getMouth = () => {
    const {dispatch} = this.props;
    dispatch({
      type: `${NAMESPACE}/getMouth`,
    });
  };

const disabledMouth = [2,5,8];

this.state = {
      checkMouth: [],//保存已选择的月份
      allMouth: [],//保存月份标签的属性数据
      temCheckMouth: [],//临时保存已选择的鱼粉
      temAllMouth: [],//临时保存月份标签的属性数据
      sign: false//判断用户是否点击确定
}

getAllMouth = () => {
	//mouth即为第一步通过后台拿到的model里state的月份值
    const mouth = this.props.mouth.data || '';
    const newMonth = [];
    if (mouth && mouth.length > 0) {
      mouth.map(item => {
        newMonth.push(
          {
            value: item.code,//可理解为每个月份的id
            label: item.detail,//月份标签需展示的内容，如一月、二月等的字样
            selected: false,//月份标签是否被选择
            disabled: false//该月份是否不可点击
          }
        )
      });
    }
    // 修改无法选择的月份信息，把无法选择的月份disabled置灰掉，不允许用户点击选择
    disabledMouth.map(item => {
      newMonth[item].disabled = true;
    });
    // console.log(newMonth);

	// 把每个月份的属性数据数组存入state
    this.setState({
      allMouth: newMonth,
      temAllMouth: newMonth
    })
  };

  componentDidMount() {
    let timer;
    new Promise(resolve => {
      this.getMouth();
      timer = setInterval(() => {
        if (this.props.mouth.data) {
          resolve();
        }
      }, 100);
    }).then(() => {
      this.getAllMouth();
      clearInterval(timer);
    });
  }

this.getMouth();×
this.getAllMouth();×

  componentDidMount() {    ×
    new Promise(resolve => {    ×
      this.getMouth();    ×
          resolve();    ×
    }).then(() => {    ×
      this.getAllMouth();    ×
    });    ×
  }    ×

<div onClick={this.handleMouth}>
	<InputItem placeholder="请选择申请月份" readonly="readonly" clear >
		申请月份
	</InputItem>
</div>

  handleMouth = () => {
    const {allMouth} = this.state;
    //这一步是为了删去数组第一条全选数据，全选不需要显示。可忽略
    const newMouthData = allMouth && allMouth.slice(1);

    const modalData = (
      <div className={styles.modalStyle}>
        <div className={styles['tag-body']}>
          <div style={{textAlign: 'left'}}>可选择月份（可多选）</div>
          <div className={styles['tag-box']}>
            {
              newMouthData && newMouthData.map((item) => {
                return (
                  <Tag
                    data-seed="logId"
                    onChange={(selected) => this.handleOnTagChange(selected, item.value)} // 用户点击不同月份时触发的方法（详情见下方标题六）
                    selected={item.selected}// 控制不同月份的选中状态
                    disabled={item.disabled}// 控制不同月份是否可点击
                  >
                    {item.label}
                  </Tag>
                )
              })
            }
          </div>
        </div>
      </div>
    )
    const button1 = (
      <div className={styles.buttonStyle}>
        <span>取消</span>
        <span onClick={this.handleConfirm}>确定</span>//详情请见标题七的内容
      </div>
    )
    const BUTTONS = [modalData];
    ActionSheet.showActionSheetWithOptions({
        options: [button1],
        message: BUTTONS,
      },
      // 关闭页面执行的方法
      (buttonIndex) => {
		this.closePage();//详情请见标题八的内容
      });
  };

handleOnTagChange = (selected, value) => {
	/**
	*  用户在弹窗选择月份时，虽然当前处于选中状态。
	*  但是倘若用户选择完毕时不点击确定，而且直接关闭页面
	*  则之前选中的月份都不应该保存！所以此处用临时数组进行保存
	*  只有用户点击确定，才把选择的所有内容保存到正式的数组中
	*/
    const {temAllMouth, temCheckMouth} = this.state;

    // 修改月份对应的selected属性
    const newAllMouth = JSON.parse(JSON.stringify(temAllMouth));
    newAllMouth[value].selected = selected;
    // console.log(newAllMouth);

    // 记录选中的月份
    const newCheckMouth = JSON.parse(JSON.stringify(temCheckMouth));
    if (selected) {//如果选中，把选中的月份添加进数组
      newCheckMouth.push(parseInt(value));
    } else {//如果是取消选中，需要把之前的选中从数组中删除
      const deleteMouth = newCheckMouth.findIndex(item => item == value);
      newCheckMouth.splice(deleteMouth, 1);
    }
    // console.log(newCheckMouth);

    this.setState({
      temCheckMouth: newCheckMouth,
      temAllMouth: newAllMouth
    });
  };

const {temAllMouth, temCheckMouth} = this.state;
const newAllMouth = temAllMouth;×××××错误范例！！！

handleConfirm = () => {
    const {temCheckMouth, temAllMouth} = this.state;

    /**
    * 对选中月份进行排序
    * 因为关闭弹窗后需要在input框中显示用户选择的月份
    * 而用户选择的顺序是不定，所以temCheckMouth保存的选中月份也是乱的
    * 故此处为了美观，对选中月份进行了排序
    * 使用的是最简单的冒泡排序，可以忽略
    */
    const newCheckMouth = JSON.parse(JSON.stringify(temCheckMouth));
    if (newCheckMouth && newCheckMouth.length > 1){
      newCheckMouth.map((item,index) => {
        for (let j = 0; j<newCheckMouth.length-index;j+=1){
          if (newCheckMouth[j] > newCheckMouth[j + 1]){
            const temp = newCheckMouth[j];
            newCheckMouth[j] = newCheckMouth[j + 1];
            newCheckMouth[j + 1] = temp;
          }
        }
      });
    }
    console.log('选中的月份--' + newCheckMouth);

	// 此时用户点击确定按钮，需要把之前保存的临时数据赋值给正式的数组
    this.setState({
      allMouth: temAllMouth,
      checkMouth: newCheckMouth,
      temCheckMouth: newCheckMouth,
      sign: true //确定页面
    });

	// 把选中的月份展示在input框，只有用户有选择月份的情况才需要展示
    if (temCheckMouth){
      this.props.form.setFieldsValue({ sqzzjtyf: newCheckMouth.toString() });
    }
  }

	closePage = （） => {
        setTimeout(()=>{
          const {checkMouth, allMouth, sure} = this.state;
          // sure=false代表用户没有点击确定，则需要把之前保存的临时数据重置，保证用户下次打开弹窗时数据的正确性
          if(!sure){
            this.setState({
              temCheckMouth: checkMouth,
              temAllMouth: allMouth
            });
          }else{ // 把点击确定时修改的sure=true修改回false，保证下次再次打开弹窗的正确性
            this.setState({
              sure: false
            });
          }
        },50)
	}

      temCheckMouth: checkMouth（旧值）,
      temAllMouth: allMouth（旧值）