文章目录

• 整体结构(组件思想)
• 一、App.js文件配置
• 二、Header.js配置
• 三、Item.js文件配置
• 四、List.js配置
• 五、Todo.js文件配置
• 六、效果展示

整体结构(组件思想)

一、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;

六、效果展示