class App extends Component {
constructor(props){
super(props);
this.state ={
searchText:'',//输入框内容
leftuserArr:[],//左侧用户列表
rightuserArr:[],//右侧用户列表
currentIndex:null,
isSel:false,
}
}
//添加列表
onAdd =(text)=>{
if(text === ''){
alert("输入框不能为空")
return
}
this.state.leftuserArr.push(text);
this.setState({
leftuserArr:this.state.leftuserArr,
searchText:''
})
}
//输入框默认值可变
searchChange = (e) => {
this.setState({
searchText: e.target.value
})
}
//列表选中高亮
selectColor =(index)=>{
this.setState({
currentIndex:index
})
}
//选中向右添加 左减少
rightAdd =(index)=>{
let right = this.state.rightuserArr;
let rightData = this.state.leftuserArr.splice(index,1)
right.push(rightData);
this.setState({
leftuserArr:this.state.leftuserArr,
rightuserArr:this.state.rightuserArr,
currentIndex:null
})
}
render() {
let {searchText,leftuserArr,currentIndex,rightuserArr,isdiff} = this.state;
return (
<div className="App">
<div className="main">
<div className="inputValue"><Input placeholder="填写你的名字" onChange={this.searchChange} value={searchText}/></div>
<div className="inputValue"><Button type="primary" onClick={this.onAdd.bind(this,searchText)}>add</Button></div>
<ul className="leftBox">
{
leftuserArr.map((item,index)=>{
let allSelect = index === currentIndex?"active":''
return <li className={allSelect} key={index} onClick={this.selectColor.bind(this,index)}>{item}</li>
})
}
</ul>
<div className="centerBox">
<Button type="primary" onClick={this.rightAdd.bind(this,currentIndex)}>+</Button>
<br />
<Button type="danger">-</Button>
</div>
<ul className="rightBox">
{
rightuserArr.map((item,index)=>{
let rightSelect = index === currentIndex?"activetwo":'';
return <li className={rightSelect} key={index} onClick={this.selectColor.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
</div>
);
}
}
