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
