1.React响应式设计思想和事件绑定

一、示例代码解析

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

class TodoList extends Component{
  constructor(props){
    super(props);
    this.state = {
      inputValue:'fjsdhf',
    }
  }
    render() {
        return(
            

                
                提交
            
  
        )
    }
  handleInputChange(e){
    this.setState(({
      inputValue : e.target.value,
    }))
}
export default TodoList;

1.TodoList是一个类，在一个类里面就一定会有个constructor构造函数，当我们使用这个类或组件时，constructor是优于其他任何函数最先被执行的一个函数。
2.调用父类的构造函数，super(props);（固定写法），也就是TodoList继承了的React中Component组件，所以要在创建TodoList的时候（super指的是父类，也就是Component）要调用父类构造函数一次。
3.定义数据，
this.state = {
inputValue:'fjsdhf',
}
React中需要把数据定义在状态里，this.state就是这个组件的状态，组件的状态中就可以存很多的东西。
4.定义的数据与组件绑定，value={this.state.inputValue}> 中value是input组件的属性。通过这行代码渲染显示。
5.事件监听 例：onChange

handleInputChange(e){
}

会接收一个事件对象（e）,如下

屏幕快照 2019-04-15 15.33.33.png

展开如下：

屏幕快照 2019-04-15 15.33.50.png

其中包含一个target属性，通过e.target.value获取到即要输入的内容
6.改变state中inputValue的值

handleInputChange(e){
this.state.inputValue = e.target.value;
}

如上写法无响应，

屏幕快照 2019-04-15 15.51.54.png

屏幕快照 2019-04-15 15.52.10.png

这时需要用

onChange={this.handleInputChange.bind(this)

的bind函数来改变handleInputChange这个函数的this指向，这个时候这个this指向的是这个类组件。
在React中想改变state的状态不能用This.state.的引用形式去改变里面的值，React给每一个组件提供了一个方法叫 setState({ }),如下：

this.setState(({
      inputValue : e.target.value,
    }))

就可以了。
总结：
1.state负责存储组件里的数据
2.React中想改变state的状态，要用 setState({ })方法
3.调用函数 要用bind函数来改变函数this指向