React 怎么用组件实现一个简单的todo list
Handle(添加组件)
import React, { Component } from 'react'; class Handle extends Component { state = { inputVal: '' } render(){ let {inputVal} = this.state; return ( <div className="handle"> <input type="text" value={inputVal} onChange={this.changeAction}/> <button onClick={this.addAction}>添加</button> </div> ); } changeAction = (ev)=>{ this.setState({inputVal: ev.target.value}); } // 添加数据 addAction = ()=>{ // 调用父组件的方法 this.props.onAdd(this.state.inputVal); // 清空输入框 this.setState({inputVal: ''}); } } export default Handle;
List(列表组件)
import React, { Component } from 'react'; class List extends Component { render() { let { data } = this.props; return ( <ul className="list"> { data.map((item, index)=>( <li style={{textDecoration: (item.status==='finished')?'line-through':'none'}}> <span>{item.value}</span> {(item.status!=='finished') && <button onClick={()=>this.finishAction(index)}>完成</button>} <button onClick={()=>this.deleteAction(index)}>删除</button> </li> )) } </ul> ); } // 每一项数据完成的点击事件 finishAction = (index)=>{ this.props.onFinishItem(index); } // 每一项数据的删除事件 deleteAction(index){ this.props.onDeleteItem(index); } } export default List;
Tools(选项组件)
import React, { Component } from 'react'; class Tools extends Component { render() { let btns = [ {title: '所有', status: 'all'}, {title: '完成', status: 'finished'}, {title: '未完成', status: 'todo'} ] return ( <ul className="tools"> { btns.map(item=>{ return ( <li key={item.status} onClick={()=>this.changeStatusAction(item.status)}> {item.title} </li> ) }) } </ul> ); } changeStatusAction = (status)=>{ this.props.onChangeStatus(status); } } export default Tools;
APP组件
import React, { Component } from 'react'; import Handle from './components/Handle' import List from './components/List' import Tools from './components/Tools' class App extends Component { state = { data: [], status: 'all' }; render() { let {data, status} = this.state; // 过滤数据 let newData = data.filter((item,index)=>{ if(status === 'all'){ return true; }else{ return item.status === status; } }) return ( <div id="app"> <Handle onAdd={this.handleAdd}/> <List data={newData} onFinishItem={this.handleFinishItem} onDeleteItem={this.handleDeleteItem}/> <Tools onChangeStatus={this.handleChangeStatus}/> </div> ); } // 处理Handle组件添加的数据的事件 handleAdd = (value)=>{ let info = { value, status: 'todo' }; this.setState({data: [...this.state.data, info]}); } // 处理完成的事件 handleFinishItem = (index)=>{ // todo ---> finished let newArr = this.state.data.map((item, i)=>{ if(index !== i){ return item; }else{ return { ...item, status: 'finished' } } }) this.setState({data: newArr}); } // 删除item handleDeleteItem = (index)=>{ let newArr = this.state.data.filter((item, i)=>{ return index !== i; }); this.setState({data: newArr}); } // 处理修改todolist需要展示每一项待办事件 handleChangeStatus = (flag)=>{ this.setState({ status: flag }); } } export default App;