react.js 第一个最原始的TodoList

ToDoList.js

import React, { Component, Fragment } from 'react';

class ToDoList extends Component {
    constructor(props) {
        //constructor是一个构造函数，每个类都有，是最先被执行的函数
        super(props)
        //super(props)指的是要调用父类的构造函数
        this.state = {
            //this.state指的是父类的状态
            inputValue: '',//input框的内容
            list: [],//展示的列表
        }
    }
    //输入框的值发生变化
    handleInputChange = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    }
    //点击提交
    handleButtonChange = () => {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: '',//点击提交后把输入框中的值清空
        })
        //***[...this.state.list,]中...是一个展开运算符，把以前数组的内容展开，生成一个新数组
    }
    //点击内容（删除）
    handleItemDelete = (index) => {
        const list = [...this.state.list]//拷贝
        list.splice(index, 1)
        //用splice()方法删除数组某一项，第一个参数为要删除的内容开始下标，第二个删除为删除个数
        this.setState({
            list: list,
        })
    }
    render() {
        return (
            <Fragment>
                {/* Fragment占位符，可以让最外层的div隐藏掉 */}
                <div>
                    <label htmlFor='insertArea'>输入内容</label>
                    {/* 当label被点击时，浏览器会自动将焦点转移到个label相关的input上 */}
                    <input id="insertArea" value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
                    {/* input框的值和状态中的inputValue进行绑定 */}
                    <button onClick={this.handleButtonChange.bind(this)}>提交</button>
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}
                                        onClick={this.handleItemDelete.bind(this, index)}
                                        dangerouslySetInnerHTML={
   
   { __html: item }}></li>
                                    //***dangerouslySetInnerHTMl 是React标签的一个属性,接收的是一个对象键值对,通过html形式展现出来
                                    //bind方法除了绑定this，还可以传参
                                    //map方法用于对数组进行遍历，返回内容和index，是es5中的方法
                                    //在react中做循环渲染的时候必须增加key值
                                )
                            })
                        }
                    </ul>
                </div>
            </Fragment>
        )
    }
}

export default ToDoList;