React基础练习 TodoList

最新推荐文章于 2024-09-11 20:31:47 发布

阿狸要吃吃的

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量176

点赞数 1

分类专栏： react 文章标签： reactjs html5 css javascript es6

本文链接：https://blog.csdn.net/qq_41387631/article/details/104008614

版权

react 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

React基础练习 TodoList

最终效果：
1：在输入框输入，点击Add，【正在准备的事情】增加一项
2：点击【正在准备的事情】的【X】，本项移入【已完成的事情】
3：点击【已完成的事情】的【X】，本项移入【正在准备的事情】

虽然效果的逻辑有些许的bug，但是操作无误，重在练习嘛！react小白，有错误欢迎指出。
在这里插入图片描述

import React from 'react';
import '../assets/css/todoList.scss'

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: [],
            delInput: [],
        };
    }
    finish(index) {
        let input = this.state.input;
        let delInput = this.state.delInput;
        delInput.push(input.splice(index, 1));
        this.setState({
            delInput: delInput,
        })
        this.setState({
            input: input,
        })
    }
    unfinish(index) {
        let input = this.state.input;
        let delInput = this.state.delInput;
        input.push(delInput.splice(index, 1));
        this.setState({
            delInput: delInput,
        })
        this.setState({
            input: input,
        })
    }
    submit() {
        let value = this.refs.userInput.value;
        let input = this.state.input;
        if (value) {
            input.push(value);
            this.setState({
                input: input,
            })
            this.refs.userInput.value = ''
        }
    }
    render() {
        return (
            <div className="todolist">
                <div className='banner'>
                    <div className="banner-input">
                        <input className='input' ref='userInput'></input>
                        <button className='add' onClick={() => this.submit()}>Add</button>
                    </div>
                </div>

                <div className='main'>
                    <h3>正在准备的事情</h3>
                    <ul className='list'>
                        {
                            this.state.input.map((item, index) => {
                                return (
                                    <li key={index}>{item} <span className='delete' onClick={() => this.finish(index)}>X</span></li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className='main'>
                    <h3>已完成的事情</h3>
                    <ul className='list'>
                        {
                            this.state.delInput.map((item, index) => {
                                return (
                                    <li style={{ backgroundColor: '#999' }} key={index}>{item} <p className='delete' onClick={() => this.unfinish(index)}>X</p></li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default TodoList;