React学习笔记—TodoList

  1. React中的TodoList
    1. 1、TodoList 一:
    2. 2、TodoList 二:

React中的TodoList

1、TodoList 一:

import React, { Component } from 'react'

class TodoList extends Component {
    state = {
        todos: [
            { id: 1, name: "吃饭", hasFinshed: true },
            { id: 2, name: "睡觉", hasFinshed: true }
        ]
    }
    render() {
        return (
            <div>
                <h2>添加代办事项</h2>
                <input type="text" ref="mytext"></input>
                <button onClick={() => this.addClick(this.refs.mytext.value)}>add</button>
                <br />
                <br />
                {
                    this.state.todos.map(item =>
                        <li key={item.id}>{item.name}
                            <i>{item.hasFinshed ? "已完成" : "未完成"}</i>&nbsp;&nbsp;
                            <button onClick={() => this.toggleHasFinished(item.id)}>切换为{item.hasFinshed ? "未" : "已"}完成</button>
                            <button onClick={() => this.removeTodo(item.id)}>delete</button>
                        </li>
                    )
                }
            </div>
        )
    }
    // 添加数据
    addClick = (name) => {
        this.setState({
            todos: [
                ...this.state.todos,
                {
                    id: Date.now(),
                    name: name,
                    hasFinshed: false
                }
            ]
        })
        this.refs.mytext.value = ""
    }
    // 修改状态
    toggleHasFinished = (id) => {
        this.setState({
            todos: this.state.todos.map(todo => {
                if (todo.id === id) {
                    todo.hasFinshed = !todo.hasFinshed
                }
                return todo
            })
        })
    }
    // 删除数据
    removeTodo = (id) => {
        this.setState({
            todos: this.state.todos.filter(todo => todo.id != id)
        })
    }
}

export default TodoList

2、TodoList 二:

import React, { Component } from 'react'

export default class TodoList extends Component {

    state = {
        dataList: ["111", "222", "333"],
        mytext: ""
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.mytext} onChange={(evt) => {
                    this.setState({
                        mytext: evt.target.value
                    })
                }} />
                <button onClick={this.handleClick}>add</button>
                <ul>
                    {
                        this.state.dataList.map((item, index) =>
                            <li key={item}>
                                {item}
                                <button onClick={() => this.handleDelClick(index)}>delete</button>
                            </li>
                        )
                    }
                </ul>

            </div >
        )
    }

    handleClick = () => {
        this.setState({
            dataList: [...this.state.dataList, this.state.mytext],
            mytext: ""
        })
    }

    handleDelClick = (index) => {
        let newList = [...this.state.dataList]
        newList.splice(index, 1)
        this.setState({
            dataList: newList
        })
    }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—TodoList

文章字数:383

本文作者:Spicy boy

发布时间:2020-04-19, 23:59:30

最后更新:2021-01-25, 10:17:35

原始链接:http://www.spicyboy.cn/2020/04/19/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94todoList/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏