React 数据绑定 和 事件绑定

根据实际代码，简单讲解一下数据绑定和事件绑定的用法
请新建 js 文件 > 编写代码 ； 并在index.js引入并使用它

import React, {Component} from 'react'

class TodoList extends Component {
  constructor(props) { //构造函数，当我们使用的时候 constructor 这个函数会优于其他函数被最先执行的构造函数， 它有一个叫做props的固定参数
    super(props); // 调用父类的构造函数，也就是继承
    this.state = { //定义数据，
      inputValue: '',
      list: ['星期一', '星期二', '星期三']
    }
  }

  render() {
    const content = {
      width: '500px',
      margin: '20px auto',
    }, so = {
      marginBottom: '20px',
      display: 'flex',
      height: '30px'
    }, input = {
      flex: '1',
      padding: '0 10px',
      margin: '0',
      border: '1px solid #ccc',
      borderRight: 'none'
    }, button = {
      border: 'none',
      margin: '0',
      padding: '0 20px',
      background: 'orange',
      color: 'white',
      cursor: 'pointer'
    }, ul = {
      width: '500px',
      margin: '20px auto',
      padding: '0'
    }, li = {
      height: '40px',
      lineHeight: '40px',
    }, anniu = {
      float: 'right',
      background: 'red',
      color: 'white',
      border: 'none',
      height: '30px',
      lineHeight: '30px',
      marginTop: '5px',
      padding: '0 10px',
      cursor: 'pointer',
    }
    return (
      <div style={content}>
        <div style={so}>
          {/*
            jsx内使用js的变量或js的表达式要在最外层加上一个大括号 {}
            value={this.state.inputValue} 绑定数据
            onChange={this.inputChange.bind(this)} 和原生JS一样绑定方法，on*大写; bind是ES6里面的函数，借助bind函数来改变this指向
          */}
          <input
            style={input}
            value={this.state.inputValue}
            onChange={this.inputChange.bind(this)}/>
          <button
            style={button}
            onClick={this.setInputChange.bind(this)}>
            提交
          </button>
        </div>
        <ul style={ul}>
          {/*
            for 循环 list
            {}花括号代表js的表达式！
            在ES5里面会有一个map方法，用map方法对list进行循环，方法里面会有两个参数
              1. item，具体每一项里面的内容
              2. index，对应下标
            最后 return 返回<li></li>标签
          */}
          {
            this.state.list.map((item, index) => {
              return (
                <li
                  key={index}
                  style={li}>
                  {index + 1}：{item}
                  <button
                    style={anniu}
                    onClick={this.delListItem.bind(this, index)}> {/* bind函数里加入参数 */}
                    删除
                  </button>
                </li>
                /*
                 * 额外讲解一下 数据绑定支持html标签  dangerouslySetInnerHTML
                 * <li key={index} style={li} dangerouslySetInnerHTML={{__html: item}}></li>
                 * 输入带html标签的内容 <h1>输入内容</h1> 并提交可以看到效果
                */
              )
            })
          }
        </ul>
      </div>
    )
  }

  inputChange(e) {
    this.setState({ //setState 改变数据
      inputValue: e.target.value //target DOM节点
    })
  }

  setInputChange() {
    this.setState({
      list: [...this.state.list, this.state.inputValue], //... 是ES6里面的扩展运算符，也叫展开寻算法； []新建一个数组 放入 ...this.state.list之前list里所放的内容 , 在加入 this.state.inputValue 跟list合并
      inputValue: ''
    })
  }

  delListItem(index) {
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list
    })
  }
}

export default TodoList;