Use React.js to achieve a toDoList

1. We create a js file, go after the introduction of index.js

2. We write html code in return () in
Note: The contents must have a <> is completely wrapped the entire return () in this syntax is defined in JSX
and contrast Vue: Vue also requires compoment components in there a <> to complete the package <template>contents label
if I do not want to occupy the position of the label element, we directly use the tag <Fragment>this placeholder , wrapped in an outer layer can
remember the introduction of import React in this way, {} Fragment from 'REACT'; Oh ~

The 3.React responsive design and event bindings (operation data to replace general dom)
and Comparative Vue: are responsive framework dom are operated by the operation of the data
(1) in the constructor () Creating a data {} in
TodoList this function is a class, we have to write the data by which this class constructor function

 constructor(props) {
        super(props);
        this.state={} 
    }

(2) create the data we need in the state (state) in

this.state = {
	inputValue:'';
	list: []
}

Note that you must not
this.state. Variable name = value
this direct to modify data, this does not meet the requirements of immutable, state in principle, allow us to make any changes
(3) () function in the return render ( ) write code for our JSX

   <Fragment>
                <div className="App">
                    {/*如果你在label这里直接写for react会默认为循环 因此要写htmlfor */}
                    <label htmlFor="insertArea">输入内容</label>
                    <input className='input'
                           id="insertArea"
                            value={this.state.inputValue}
                            onChange={this.handleInputChange.bind(this)
                            }
                    />
                    <button onClick={this.handleButtonClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {/*this.handleItemDelete.bind(this,index)指的是给每一个这样的函数
                     添加一个单击响应函数
                     */}
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}
                            onClick={this.handleItemDelete.bind(this,index)}
                            >{item}</li>
                            {/*如果不转义添加一个这个 dangerouslySetInnerHTML={{__html:item}}*/}
                     })
                    }
                </ul>
            </Fragment>

You need to pay attention to each label to add extra time response function of a .bind (this) response function to change this click point

Logic code in each function (4) Write

  handleInputChange(e) {
            console.log(e.target);
            this.setState({
                inputValue:e.target.value
            });
            }
            /*动态改变input的值，将从input中得到的值传入state中*/

If you want to change the value of the state must be achieved by this.setState this method, each method has a
node is to get console.log (e.target) of the target's printed here

 handleButtonClick(e){
        this.setState({
            list: [...this.state.list,this.state.inputValue],
            // ... 扩展运算符的作用将以前的数组展开并生成一个新的数组,然后复制给list进行变化
            inputValue:''
        });
    }

The important thing here is that this extended operator i.e., the original number with the number of the input and the new and
inputValue: '' role is to clear the value of the text box

 handleItemDelete(index){
    // 通过在bind(this,index)多写一个index来传入 经过测试this和index 无法一起传入
        // 有一种东西叫immutable
        // state 不允许我们做任何的改变
        console.log(index);
        const list=[...this.state.list]; // 这句话只是将list拷贝出来
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

Here's the extended operator only played the incoming value state.list passed to our newly defined const list in
the deletion of the following array
list in the list of incoming to setState