react的数据驱动和事件绑定

2018-09-20  本文已影响0人  灯光树影

一、react的响应式理念

react是一个通过数据驱动的框架,不直接操纵dom,而是操纵数据来改变页面的内容。

二、事件绑定

import React, {Component} from 'react'

class TodoList extends Component{

    // 构造函数
    constructor(props){
        super(props)
        this.state = {
            inputValue: '开始书写',
            list: []
        }
    }

    render(){
        return(
            <div>
                <div>
                    <input value = {this.state.inputValue} onChange = {this.handleInputData.bind(this)}/>    
                    <button>提交</button>
                </div> 
                <ul>
                    <li>学英语</li>
                    <li>Learning React</li>
                </ul>
            </div>
        )
    }

    // 处理方法
    handleInputData(e){
        this.setState({
            inputValue: e.target.value
        })
    } 
}

// 导出模块
export default TodoList;
  1. 组件的属性要在对象的constructor方法中的state属性中定义
  2. 标签绑定组件对象属性时,用{this.state.attrName}的方式
  3. 标签绑定事件时,要用bind将处理方法的this绑定到对象的this,否则方法调用时的this为undefined
  4. 事件绑定onchange的写法是未定义的,要使用驼峰式写法onChange
  5. 在方法中修改对象属性时,应该使用对象的setState方法,不能直接使用this.state.attrName = value的方式
上一篇下一篇

猜你喜欢

热点阅读