使用React实现TodoList功能

什么是TodoList？它可以看做是一个待办事项列表。类似于todolist.cn。下面用React实现一次。

最后效果

录了一段视频用来演示具体效果：)。首先输入内容提交后放入列表中。单击某一项可以将其删除。

---

方法&代码

新建一个项目。在index.js中添加代码import TodoList from './TodoList';引入组件。并更改ReactDOM.render(<TodoList />, document.getElementById('root'));

新建三个文件TodoList.js、TodoItem.js、style.css。代码比较简单就不过多说明了。

TodoItem.js代码

通过以上视频来看，可以将Todolist看做两个组件组成。TodoItem是列表组件。用于获取父组件中的值，然后输出。

import React,{Component} from 'react';

class TodoItem extends Component{

    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        const  {content} = this.props;
        return (
            <li
                onClick={this.handleClick}>
                {content}
            </li>
        )
    }
    handleClick(){
        const {deleteItem,index} = this.props;
        deleteItem(index);
    }

}

export default TodoItem;

TodoList.js代码

这是父组件，包含lable、输入框、提交按钮。代码中Key使用index不是很好。有待改进。

import React, {Component, Fragment } from 'react';
import TodoTtem from './TodoItem';
import './style.css'

class TodoList extends Component{

    constructor(props){
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

    render(){
        return (
            <Fragment>
                <div className='pad'>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id={"insertArea"}
                        className='input mar'
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                    />
                    <button className='mar' onClick={this.handleBtnClick}>提交</button>
                </div>

                <ul>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        );
    }

    getTodoItem(){
        return this.state.list.map( (item , index) => {
            return (
                <div key={index}>
                    <TodoTtem
                        content={item}
                        index={index}
                        deleteItem={this.handleDelete}
                    />
                </div>
            )
        })
    }

    handleDelete(index){
        this.setState((prevState) => {
            const list = [...prevState.list];
            list.splice(index,1);
            return {list};
        });
    }

    handleBtnClick(){
        this.setState( (prevState) => {
            return {
                list:[...prevState.list,prevState.inputValue],
                inputValue:''
            }
        })
    }

    handleInputChange(e){
        const value = e.target.value;
        this.setState( () =>{
            return{
                inputValue: value
            }
        })
    }
}

export default TodoList;

style.css代码

很普通的样式文件

.input{
    border: 1px solid red;
}
.pad{
    padding: 10px;
}
.mar{
    margin-left: 10px;
}