React 中的响应式设计思想和事件绑定

在react中如何定义数据？

• 在js里，一个类，一定会有一个构造函数constructor,当我们去创建这个类的实例的时候，这个constructor构造函数，是最优先执行的函数。

class TodoList extends Component {
    constructor(props){
       // TodoList组件 继承了react里的 Component组件，super(props)指的是就是调用Component这个父类的构造函数一次。
        super(props)
    }
}

• react的数据，要定义在状态this.state里，具体写法

class TodoList extends Component {
    constructor(props){
        super(props)
      
        this.state = {
            inputValue:'hello',
            list:[]
        }
    }
}

• 如果我们想让input框的值，由我们定义的数据决定，可以这么写. value后边跟的是我们定义的变量。
  注意：jsx语法中，使用js表达式，或者js变量，那么必须要写在大括号中

render(){
        return (
            <Fragment>
                <div>
                    <input 
                        value={this.state.inputValue}
                    />
                    <button>提交</button>
                </div>
                <ul>
                    <li>英文</li>
                    <li>数学</li>
                </ul>
            </Fragment>
        )
    }

react事件绑定的语法。

• 原生事件绑定

<input  
            value={this.state.inputValue}
            onchange="xxxx"
/>

• react事件绑定,on后边首字母大写

<input  
            value={this.state.inputValue}
            onChange={this.handleInputChange}
/>

• 监听事件，绑定事件处理程序。这个函数，我们先定义一下。这个时候，我们运行的时候，发现报错，this找不到。

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

• 改变函数里的this指向，让this指向组件本身。我们可以借助ES6里 bind函数，来改变handleInputChange函数里的this指向，具体做法如下

<input 
          value={this.state.inputValue}
          onChange={this.handleInputChange.bind(this)}
 />

• 但是上边的代码怡然不能让我们实现输入改变input框的值。因为我们是直接通过给 this.state.inputValue f赋值的方式，去改变它的值，这是不行的，react提供了 setState方法来改变state状态里的变量值

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

列表循环

• 通常是使用数组的map方法，注意生成的每一项都要加key

<ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <li key={index} 
                                    onClick={this.handleItemDelete.bind(this,index)}
                                >
                                    {item}
                                </li>
                            )
                        })
                    }
                </ul>

• 绑定的事件处理函数，如果需要额外传参，可以通过bind

    handleItemDelete(index){
        // 这里通过展开运算符，拷贝一份list数组
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

react不允许直接修改 state

// immutable
this.state.list.splice(index,1)

总结

1. state负责存储组件里的数据。
2. jsx语法里使用变量或者表达式，要加{}。
3. 事件绑定的时候，需要通过bind(this)对函数的作用域进行变更。
4. 如果想改变数据内容，不能直接改变，需要通过setState函数进行变更。