react简书项目学习笔记3响应式设计和数据绑定

1.react里的数据放在state里
2. react中事件绑定的时候需要通过bind（this）对函数作用域进行变更，使this指向当前组件
3.在react中改变state中的数据 必须使用setState方法

注意setstate（）是异步的，数据更改后要进行的同步操作要放在回调函数里才会及时

 class TodoList extends Component {
  // todolist是一个类，在js中一个类一定会有一个construtor构造函数
  //使用组件时consturctor构造函数会优于其他任何函数执行
  constructor(props) {
    super(props);
    // super继承，继承了父类component
    this.state = {
      inputValue: '',
      list: []
    }
    //react里的数据放在state里

  }
  render() {
    return (
      <Fragment>
        <div>
          {/* 数据绑定 */   /* jsx语法中使用js变量,表达式要在最外层加一个{},
      原生绑定事件是onchange，但react中要驼峰命名,
      react中数据绑定是单项绑，要改变，要用函数
      react中事件绑定的时候需要通过bind（this）对函数作用域进行变更，使this指向当前组件 */}
          <input value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}
          />
          <button>提交</button>
        </div>
        <ul>
          <li>学英语</li>
          <li>learing React</li>
        </ul>
      </Fragment>
    )

  }
  handleInputChange(e) {
    // 在react中改变state中的数据 必须使用setState方法
    this.setState({
      inputValue:e.target.value
    })
  }
}