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;
- 组件的属性要在对象的constructor方法中的state属性中定义
- 标签绑定组件对象属性时,用{this.state.attrName}的方式
- 标签绑定事件时,要用bind将处理方法的this绑定到对象的this,否则方法调用时的this为undefined
- 事件绑定onchange的写法是未定义的,要使用驼峰式写法onChange
- 在方法中修改对象属性时,应该使用对象的setState方法,不能直接使用this.state.attrName = value的方式