在写项目的时候遇到了这样的一个需求。有个俩个div one two,一个是空的,one里面包裹着ul,ul下面的li是一条条的数据。需要点击其中一条的数据,然后点击一个按钮就能把这条数据传到two里面去。还有一个按钮,点击它的时候回把整条数据传到two里面。并且one的数据回消失然后也可以把传过去的数据已同样的方法在转回到one。下面是这一段的js的代码
//把全部数据传过去
removeList() {
// 判断该次日期选择是否含有数据,没有数据直接结束逻辑
if (this.state.dataName.length > 0) {
// 复制一个备选数据的模板(因为this.state没法通过数组api进行修改,只能通过this.setState)
var dataList = this.state.dataName.slice(0);
// 复制完数据后,将备选数据置空
this.setState({ dataName: [] })
} else {
return;
}
// 将上一次选择的数据和这一次的数据拼接在一起,得到最新的悬着结果
this.setState({
dataList: Array.from(new Set([...this.state.dataList, ...dataList]))
}, () => {
Array.from(new Set(this.state.dataList))
})
}
//把全部数据退回来
backList() {
if (this.state.dataList.length > 0) {
var dataName = this.state.dataList.slice(0)
} else {
return;
}
this.setState({
dataName: [...this.state.dataName, ...dataName]
})
this.setState({ dataList: [] })
}
//只把点中的数据传过去
oneList() {
if (this.state.ArrayList.length > 0) {
var dataList = this.state.ArrayList.slice(0);
this.setState({ ArrayList: [] })
} else {
return;
}
const filterList = this.state.dataName.filter((item) => {
if (item.id !== dataList[0]["id"]) {
return item
}
return null;
})
this.setState({ dataName: filterList })
this.setState({
dataList: [...this.state.dataList, ...dataList]
})
}
//点钟一个将数局返回
oneBackList() {
if (this.state.ArrayList.length > 0) {
var dataName = this.state.ArrayList.slice(0);
this.setState({ ArrayList: [] })
} else {
return;
}
const backDataList = this.state.dataList.filter((items) => {
if (items.id !== dataName[0]["id"]) {
return items
}
return null;
})
this.setState({ dataList: backDataList })
this.setState({
dataName: [...this.state.dataName, ...dataName]
})
}
现在这个逻辑还是有些问题,我们是通过下拉框来选择导入的数据的,但是就是这选择过这条数据之后还可以选择这条数据。还可以导入到two div里面,这样就导致导入数据变得重复了。我通过数组去重还是没有解决掉这个问题,希望有大神看到之后能给我一些解决方案。