React实现ToDoList

最新推荐文章于 2023-01-03 00:27:28 发布

小手冰凉的007

最新推荐文章于 2023-01-03 00:27:28 发布

阅读量136

点赞数 1

分类专栏： JavaScript react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_48065262/article/details/115386434

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用React构建一个交互式的待办事项管理应用。用户可以输入新的待办事项，点击添加按钮将其保存到列表中，通过搜索功能过滤特定任务，还可以编辑、删除、全选和取消选中任务。应用包含状态管理、事件处理和UI组件的交互逻辑。

摘要由CSDN通过智能技术生成

需要搭建react脚手架，放在src的index.js中

import { Component } from  'react'
import ReactDOM from 'react-dom'

class  Tick extends Component {
    state = {
        val: '',
        arr: [],
        title: 'tiDo',
        res: [],
        flage: false
    }
    render() {
        return (
            <div>
                <input type="text" onChange={ this.change } value={ this.state.val }/>
                <button onClick={ this.show }>添加</button>
                <button onClick={ () => this.sever(this.state.title, this.state.val) }>搜索</button>
                <ul>
                    { this.state.arr.map((item,index) => {
                        return (
                            <li key={ index }>
                                { item.flag ? <span onClick={ () => { this.get(index) } }><input type="checkbox" checked={ item.textFlage } onChange={ (event)=>this.checks(event,index) }/>{ item.tiDo }</span> : <input type="text" defaultValue={ item.tiDo } onKeyDown={ (event)=>this.text(event,index) }/>  }
                                <button onClick={ () => { this.del(index) } }>删</button>
                            </li>
                        )
                    }) }
                </ul>
                <div>
                    <input type="checkbox" checked={ this.state.flage } onChange={ (event)=>this.check(event) }/>全选
                </div>

                <h3>搜索结果</h3>
                <ul>
                    { this.state.res.map((itme, index) => {
                        return <li key={ index }>{ itme.tiDo }</li>
                    }) }
                </ul>
            </div>
        )
    }
    checks = (e,i) => {
        let info = this.state.arr
        info[i].textFlage = !info[i].textFlage
        this.setState({
            arr: info
        },() => {
            let flags = this.state.arr.every(itme => itme.textFlage)
            this.setState({
                flage: flags
            })
        })
    }
    check = (e) => {
        this.setState({
            flage:e.target.checked
        },() => {
            let info = [...this.state.arr]
            info.map(itme => itme.textFlage = this.state.flage)
            this.setState({
                arr: info
            })
        })

    }
    sever = (key,val) => {
        console.log(this.state.val)
        let info = this.state.arr
        let res = info.filter((itme, index, arr) => itme[key].includes(val))
        this.setState({
            res
        })
    }
    text = (e,i) => {
        if (e.keyCode === 13) {
            let  info = this.state.arr
            info[i].tiDo = e.target.value
            info[i].flag = !info[i].flag
            this.setState({
                arr: info
            })
        }
    }
    get = (i) => {
        let  info = this.state.arr
        info[i].flag = ! info[i].flag
        this.setState({
            arr: info
        })
    }
    del = (i) => {
        let info = this.state.arr
        info.splice(i,1)
        this.setState({
            arr: info
        })
    }
    change = (e) => {
        this.setState({
            val: e.target.value
        } )
    }
    show = () => {
        let arrs = [...this.state.arr]
        arrs.push({
            tiDo: this.state.val,
            flag: true,
            textFlage:false
        })
        this.setState({
            arr: arrs
        })
        this.setState({
            val: ''
        } )
    }
}

ReactDOM.render(<Tick/>,document.getElementById('root'))