react实现多项选择题

clickItems(item){//处理工种选择的函数
    const { data, dataList } = this.state;
    if (data.includes(item.id)) { // 移除
      this.setState({
        data: data.filter((items) => {
          return items !== item.id
        }),
        dataList: dataList.filter((items) => {
          return items.id !== item.id
        })
      },()=>{
        console.log(this.state.data)
        console.log(this.state.dataList)
      });
    } else {// 添加
      if (data && data.length >= 3) return;
      data.push(item.id);
      dataList.push(item);
      this.setState({
        data:data,
       dataList:dataList,
      },()=>{
        console.log(this.state.data)
        console.log(this.state.dataList)
      })
    }

  }

  clickItemss(item){//处理选中的项
    this.setState({
      data:this.state.data.filter((items)=>{
        return items!=item.id
      }),
      dataList:this.state.dataList.filter((itemss)=>{
        return itemss.id!=item.id
      })
    },()=>{
      console.log(this.state.data)
      console.log(this.state.dataList)
    })
    console.log(item)
  }

以下事全部代码 供参考

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem ,MovableArea, MovableView ,Icon,
  Progress,

} from '@tarojs/components'

import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton ,AtForm ,AtInput,AtIndexes } from "taro-ui"
import { connect } from '@tarojs/redux'

import { add, minus, asyncAdd } from '../../actions/counter'

import './testForm.less'




/*@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))*/
class Forms extends Component {

  constructor(props){
    super(props)
    this.state = {
      value: '',
      dataList:[],
      data:[],
      data1:[],
      dataList1:[]
    }
  }

  config = {
    navigationBarTitleText: 'form页'
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }
  handleChange (value) {
    this.setState({
      value
    })
  }
  onSubmit (event) {
    console.log(event)
    console.log(this.state.value)

  }
  onReset (event) {
    console.log(event)
  }

  onClick (item) {
    console.log(item)
  }
  clickItems(item){//处理工种选择的函数
/*
      if(!this.state.data.includes(item.id)){
        console.log("没有包含当前的对象")
        this.state.data.push(item.id)
        this.state.dataList.push(item)
        if(this.state.dataList.length<=3 ){
          this.setState({
            data:this.state.data,
            dataList:this.state.dataList
          })
        }else{
          this.state.data.pop(item.id)
          this.state.dataList.pop(item)
          console.log("只能选择3项")
          console.log(this.state.data)

        }
        console.log(this.state.data)
        console.log(this.state.dataList)
      }else{
        console.log("包含当前的对象")
        if(this.state.dataList.length<=3 ){
          this.setState({
            data:this.state.data.filter((items)=>{
              return items!=item.id
            }),
            dataList:this.state.dataList.filter((items)=>{
              return items.id!=item.id
            })
          },()=>{
            console.log(this.state.data)
            console.log(this.state.dataList)
          })

        }else{
          this.state.data.pop(item.id)
          this.state.dataList.pop(item)
          console.log("只能选择3项")
          console.log(this.state.data)
        }
      }*/
    /*const { this.state.data, this.state.dataList } = this.state;*/
    const { data, dataList } = this.state;
    if (data.includes(item.id)) { // 移除
      this.setState({
        data: data.filter((items) => {
          return items !== item.id
        }),
        dataList: dataList.filter((items) => {
          return items.id !== item.id
        })
      },()=>{
        console.log(this.state.data)
        console.log(this.state.dataList)
      });
    } else {// 添加
      if (data && data.length >= 3) return;
      data.push(item.id);
      dataList.push(item);
      this.setState({
        data:data,
       dataList:dataList,
      },()=>{
        console.log(this.state.data)
        console.log(this.state.dataList)
      })
    }

  }
  clickItemss(item){
    this.setState({
      data:this.state.data.filter((items)=>{
        return items!=item.id
      }),
      dataList:this.state.dataList.filter((itemss)=>{

        return itemss.id!=item.id


      })
    },()=>{
      console.log(this.state.data)
      console.log(this.state.dataList)
    })
    console.log(item)
  }
  render () {
    const {data, dataList} = this.state;
    console.log(data+"====")
    console.log(dataList+"=====")
    const list = [
      {name:"普工",id:"1"},
      {name:"厨师",id:"2"},
      {name:"木工",id:"3"},
      {name:"工程师",id:"4"},
      {name:"钢筋工",id:"5"},
      {name:"水泥工",id:"6"},
      {name:"电工",id:"7"},
      {name:"海员",id:"8"},
      {name:"飞行员",id:"9"},
    ]

    return (

          <View>
            <View className='viewWrap'>
              {
                list.map((item,index)=>{
                  return  <View className={'view'+(this.state.data.includes(item.id) ?" active":'')} onClick={this.clickItems.bind(this,item)} key={index} >{item.name}</View>
                })

              }

            </View>

            <View>

              {
                dataList && dataList.length>0 &&  dataList.map((item,index)=>{
                  return  <View className='view1' onClick={this.clickItemss.bind(this,item )} key={index} >{item.name}</View>
                })

              }



            </View>

          </View>





    )
  }
}

export default Forms