文章目录
整体结构(组件思想)
一、App.js文件配置
import React, { Component } from 'react';
// 导入todo
import Todo from './todo/Todo';
import Life from './Life';
class App extends Component {
constructor(props) {
super(props);
this.state = { }
}
// 更新数据
render() {
return ( <div>
<Todo></Todo>
</div>);
}
}
export default App;
二、Header.js配置
import {createRef} from 'react'
const inp = createRef();
function Header (props){
return (<div>
<input ref={inp}/>
<button onClick={()=>{
props.onAdd(inp.current.value);
inp.current.value = '';
}}>添加</button>
</div>)
}
export default Header
三、Item.js文件配置
import React, { Component } from 'react';
// imrc+TAB快捷键
class Item extends Component {
constructor(props) {
super(props);
this.state = {
status: 0, //0正常状态 1编辑状态
temp: '' //修改的临时数据
}
}
// 当用户单击的确定按钮
sure=()=>{
// 01 执行更新操作
// onUpdate(nval,oval) nval最新数据,oval之前的item
this.props.onUpdate({...this.props.item,title:this.state.temp},this.props.item)
// 02 更新status,和temp
this.setState({status:0,temp:''})
}
render() {
// 重新定义props
const props = this.props;
return (<div>
{/* 根据status是0 显示第一个span 是1显示第二span */}
{this.state.status === 0 ?
<span>
<input type="checkbox"
onChange={(e) => {
props.onUpdate({
title: props.item.title,
done: e.target.checked
}, props.item)
}}
checked={props.item.done} />
<span className='content' onDoubleClick={()=>{
// 修改为编辑状态
// 设置temp值为,传入的item.title
this.setState({status:1,temp:props.item.title})
}}> {props.item.title}</span>
{/* 单击按钮执行传入delItem方法 */}
<button onClick={() => {
props.delItem(props.item);
}}>x</button>
</span> :
<span>
{/* input实现双向绑定 */}
<input value={this.state.temp} onChange={e=>{
this.setState({temp:e.target.value})
}} />
<button onClick={this.sure} >确定</button>
</span>}
</div>);
}
}
export default Item;
四、List.js配置
function List(props) {
return ( <div>
<h3>{props.title}</h3>
{props.children}
</div> );
}
export default List;
五、Todo.js文件配置
import React, { Component } from 'react';
import Header from './Header';
import List from './List';
import Item from './Item';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
todo:[
{title:"学习vue",done:true},
{title:"进击React",done:false}
]
}
}
//更新
onUpdate = (nval,oval)=>{
let todo = this.state.todo;
let idx = todo.findIndex(value=>value.title == oval.title);
todo[idx] = {...nval};
this.setState({todo});
}
// 添加
onAdd = str =>{
let todo = this.state.todo;
todo.unshift({done:false,title:str});
this.setState({todo});
}
// 定义删除方法
delItem = item=>{
let todo = this.state.todo;
let idx = todo.findIndex(value=>value.title === item.title);
todo.splice(idx,1);
//更新数据
this.setState({todo});
}
// 组件已经更新 生命周期 快捷键 cdu +table
componentDidUpdate(prevProps, prevState) {
localStorage.setItem("todo",JSON.stringify(this.state.todo));
}
// 组件已经挂载 cdm+table
componentDidMount() {
let todo = localStorage.getItem("todo")||"[]";
todo = JSON.parse(todo);
this.setState({todo});
}
render() {
const todo = this.state.todo;
return ( <div>
<h1>todo组件</h1>
<Header onAdd={this.onAdd}></Header>
<List title="未完成">
{todo.filter(value=>!value.done)
.map(value=><Item
key={value.title}
delItem = {this.delItem}
onUpdate={this.onUpdate}
item={value}>
</Item>)}
</List>
<List title="已完成">
{todo.filter(value=>value.done)
.map(value=><Item
key={value.title}
delItem = {this.delItem}
onUpdate={this.onUpdate}
item={value}>
</Item>)}
</List>
</div> );
}
}
export default Todo;