react todolist案例

import React from 'react'

class App extends React.Component{
	myref = React.createRef()
	constructor(){
		super()
		this.state = {
			list:['111','222','333']
		}
	}
	
	render(){
		return <div>
			<input ref={this.myref}></input>
			<button onClick={()=>{
				console.log(this.myref.current.value)
				var newList = [...this.state.list];
				newList.push(this.myref.current.value);
				console.log(this.state.list)
				this.setState({
					list:newList
				})
			}}>点击</button>
			<ul>
				{ this.state.list.map((item,index) => <li key={index}>{item} <button onClick={ ()=>{
						this.del(index)
				} }>删除</button> </li>)}
			</ul>
		</div>
	}
	
	del(e){
		var newlist = [...this.state.list];
		newlist.splice(e,1);
		this.setState({
			list:newlist
		})
	}
}

export default App;