基本的练手逻辑是
输入框填写内容 add 按钮添加 到下面左边列表
选后点击下边列表项高亮
点击 加 按钮 添加到右边 左边删除 右边依旧高亮
减按钮类似 加按钮
下面附上我的代码 求大佬纠正一下
class App extends Component {
constructor(props){
super(props);
this.state ={
addText:null,//输入框内容
leftuserArr:[],//左侧列表
rightuserArr:[],//右侧列表
currentIndex:null,
isSel:false
}
}
onAdd =(text)=>{
if(text === ''){
message.error("输入框不能为空")
}else{
let newData =[...this.state.leftuserArr];
newData.push(text)
this.setState({
leftuserArr:newData,
addText:''
})
message.error("添加成功")
}
}
//输入框默认值可变
searchChange = (e) => {
this.setState({
addText: e.target.value
})
}
//列表选中高亮
selectColor = (index)=>{
this.setState({
currentIndex:index
})
}
//选中向右添加 左减少
rightAdd =(index)=>{
if(index === this.state.currentIndex){
let right = [...this.state.rightuserArr];
let leftData = [...this.state.leftuserArr];
let leftNewData = leftData.splice(index,1)
right.push(leftNewData);
this.setState({
leftuserArr:leftNewData,
rightuserArr:right,
currentIndex:null
})
}else{
message.error("没有选中")
}
}
render() {
let {addText,leftuserArr,currentIndex,rightuserArr} = this.state;
return (
<div className="App">
<div className="main">
<Head
addText={addText}
searchChange={this.searchChange}
addUers={this.onAdd}/>
<Leftlist
leftuserArr={leftuserArr}
selectColor={this.selectColor}
currentIndex={currentIndex}/>
<Center
rightAdd={this.rightAdd}
currentIndex={currentIndex}/>
<Rightlist
rightuserArr={rightuserArr}
/>
</div>
</div>
);
}
}