react完成增，删功能

在写这些代码中遇到的一些小问题（知识点）：

1. 由于react组件需要用一个标签将代码包裹起来，如果我们使用div这类的标签在控制台则可以看到它的盒子，那么为了避免这类问题，我们使用Fragment,这是jsx中的占位符！
2. 在写绑定事件的时候，事件名称需要大写，例如onChange={this.handleInputChange.bind(this)}
3. 因为immutable，state不允许我们做任何改变，因此利用setstate更改state中的数据
4. 如果出现以下错误，首先需要检查component是否首字母大写，react 对象方法里面没有component。
5. react中this的指向问题：可使用bind来修改this的指向，需要注意的是bind括号内第一个参数是修改this的，后面可以设置其他参数进行传值。
6. 在react中使用花括号{}将js表达式包裹起来
7. 在react中使用循环一定要使用key值，不然会报警告

正式开发：

目标：做一个输入框，点击按钮在下面列表展示，点击对应的列表项，删除该项，如下：（没有写样式大家有需要可以自己加）
点击增加列表项目：
思路：首先将input的值设置为state的数据，然后监听input的值，之后点击按钮将列表的值替换成新的input的值。

//constructor中设置state的数据结构
    constructor(props) {
        super(props);
        this.state = {
            inputValue:'',  //input中的默认值
            list:[]        //列表项的默认值
        }
    }
   	 <Fragment>
         {/*获取input的默认值，并且监听input的值*/}
           <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
           {/*点击按钮执行增加*/}
           <button onClick={this.handleClick.bind(this)}>按钮</button>
           <ul>
               {
                   //将list中的数据循环出来
                   this.state.list.map((item,index)=>{
                       return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
                   })
               }
           </ul>
      </Fragment>
       //监听input值的变化
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    //点击更改数据
    handleClick(){
        this.setState({
            //。。。是es6中的展开运算符，以下意思是，将list原来的数据跟换成inputValue监听的值，并且将inputValue设置为空
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }

点击删除列表项目：

//绑定handleClickDelet事件
return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
//handleClickDelet()
 handleClickDelet(index){
        //首先需要展开list
        const list = [...this.state.list];
        //删除点击下标的值
        list.splice(index,1);
        this.setState({
            //更改state中的数据
            list:list
        })
    }

完整代码：

// 若要使用fragmen首先需要在这里引入
import React,{ Component,Fragment } from 'react';
class TodoList extends Component {
    //constructor中设置state的数据结构
    constructor(props) {
        super(props);
        this.state = {
            inputValue:'',  //input中的默认值
            list:[]        //列表项的默认值
        }
    }
    render() {
        return (
            //使用Fragment不会被显示
            <Fragment>
                {/*获取input的默认值，并且监听input的值*/}
                <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                {/*点击按钮执行增加*/}
                <button onClick={this.handleClick.bind(this)}>按钮</button>
                <ul>
                    {
                        //将list中的数据循环出来
                        this.state.list.map((item,index)=>{
                            return <li key={index} onClick={this.handleClickDelet.bind(this,index)}>{item}</li>
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    //监听input值的变化
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    //点击更改数据
    handleClick(){
        this.setState({
            //。。。是es6中的展开运算符，以下意思是，将list原来的数据跟换成inputValue监听的值，并且将inputValue设置为空
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    //点击删除对应下标的值
    handleClickDelet(index){
        //首先需要展开list
        const list = [...this.state.list];
        //删除点击下标的值
        list.splice(index,1);
        this.setState({
            //更改state中的数据
            list:list
        })
    }
}
//创建了TodoList组件之后要export default出去
export default TodoList;