react待办事项组件--新增与删除
import React,{Component,Fragment} from 'react';
class TodoList extends Component{
// state状态管理
constructor(props){
super(props);
this.state={
inputValue:'hello',
list:['111','222','333']
}
}
// 页面渲染
render(){
return (
<Fragment>
<input
value={this.state.inputValue}
onChange={this.handleChange.bind(this)}
/>
<button onClick={this.handleBtnClick.bind(this)}>提交</button>
<ul>
{
this.state.list.map((item,index)=>{
return <li
key={index}
onClick={this.handleBtnDelete.bind(this,index)}
>{item}</li>
})
}
</ul>
</Fragment>
)
}
// 其他方法定义
// 输入框OnChange事件
handleChange(e){
this.setState({
inputValue:e.target.value
})
}
// 点击提交 输入框的内容加入列表项
handleBtnClick(){
console.log(this)
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
// 点击每个列表项，删除对应列表项
handleBtnDelete(index){
const list=[...this.state.list];//展开运算符 拷贝一份数据给list; list!==this.state.list
list.splice(index,1);
this.setState({
list:list
})
}
}
export default TodoList;
