React Todolist1

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

import './index.css';

export default class TodoList extends Component {

    constructor(props){

        super(props);

        this.state = {

            inputValue: "",

            list: []

        }

    }

    render() {

        return (

            <Fragment>

                <label htmlFor="Myinput">输入内容：</label>

                <input 

                    id="Myinput"

                    className="input"

                    type="text" 

                    value={this.state.inputValue}

                    onChange={this.handleInputChange.bind(this)}

                />

                <button onClick={this.handleButtonClick.bind(this)}>提交</button>

                <ul>

                    {

                        this.state.list.map((item,index) => {

                            return <li 

                                        key={index} 

                                        onClick={this.handleDelete.bind(this,index)} dangerouslySetInnerHTML = {{ __html: item }} 

                                    />

                        })

                    }

                </ul>

            </Fragment>

        )

    }

    //input 值变化

    handleInputChange(e) {

        this.setState({

            inputValue: e.target.value

        })

    }

    //点击按钮提交

    handleButtonClick() {

        this.setState({

            list: [...this.state.list,this.state.inputValue],

            inputValue:""

        })

    }

    //删除事件

    handleDelete(index) {

        //console.log(index);

        const list = [...this.state.list];

        list.splice(index,1);

        this.setState({

            list: list

        })

    }

}