React中DOM事件和状态怎么绑定
本文小编为大家详细介绍“React中DOM事件和状态怎么绑定”，内容详细，步骤清晰，细节处理妥当，希望这篇“React中DOM事件和状态怎么绑定”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
DOM事件
react中绑定事件的语法跟html中为元素绑定事件的语法相似，
html中绑定事件：
<div onclick="fn"></div>
react中绑定事件
<div onClick={this.fn}></div>注意：
1 事件名称首字母必须大写
2 事件回调函数定义在组件中，我们通过插值语法引入绑定
3 事件回调函数不能执行（后面不能添加参数集合()）
绑定的是一个未执行的方法
参数
React使用了事件委托模式实现事件的绑定（事件委托模式特点：1 减少事件数量， 2 预言未来元素， 3 防止内存外泄）
vue没有实现事件委托，参数就是源生的事件对象
jquery实现了事件委托模式，参数是jquery封装后的事件对象
react中的DOM事件是基于事件委托模式实现的，因此参数就是react封装的事件对象（16版本就一个参数）
因此可以通过事件对象准确的获取绑定事件的元素，以及触发事件的元素。
作用域
react中的DOM事件回调函数
ES5开发中，this指向组件实例化对象，并且是不能改变的
ES6开发中，this默认是undefined，我们未来访问组件中的其他数据，我们要绑定作用域
改变作用域由两种方式：
第一种，使用ES5提供的bind方法，改变作用域
第二种，使用ES6提供的箭头函数，是定义时的作用域
一旦改变了作用域，我们是可以传递自定义参数的
bind方式改变的作用域，传递的自定义参数始终在事件对象前面
箭头函数改变的作用域，传递的自定义参数可以在任何位置。
在ES6开发中，事件回调函数允许我们绑定其他的对象，但是工作中，不建议绑定组件之外的其他对象
举例：
// 定义类
class Demo extends Component {
// 事件回调函数
clickBtn(e) {
console.log(this, arguments)
// console.log(e.target, e.currentTarget)
}
// 渲染
render() {
return (
<div>
<button onClick={this.clickBtn}><span>按钮</span>1</button>
{/*更改this*/}
<button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按钮2</button>
<button onClick={e => this.clickBtn(100, e, 'demo', false)}>按钮3</button>
{/*工作中，不建议绑定组件之外的其他对象*/}
<button onClick={this.clickBtn.bind(obj)}>按钮4</button>
</div>
)
}
}状态
组件有两类数据，一类是属性数据，一类就是状态数据
属性数据是在组件外部传递给组件的，因此在组件外部维护
状态数据是在组件内部使用的，因此在组件内部维护
根据组件是否有状态数据，可以将组件分成两类，一类是无状态是组件，一类是有状态组件
无状态组件
如果组件创建完成，组件就是一成不变的，组件不会产生交互，不会发送请求，这类组件就是无状态组件
我们目前所学习的组件，都是无状态组件
无状态组件还可以简写成一个函数
无状态组件也叫state less component
有状态组件
如果组件创建完成后，会与用户产生交互，会发送异步请求等等，在组件内部就会产生数据，为了维护这部分数据，我们可以将这部分数据放在状态中，这样的组件就是有状态组件。
这里的数据就是状态数据
使用状态数据
使用状态数据跟使用属性数据一样，也是通过this.state来使用。
初始化状态数据
我们在组件的构造函数中，初始化状态数据。
es6中通过constructor定义构造函数，由于我们的组件继承了Component组件基类，
并且重写了构造函数constructor，为了在构造函数内实现构造函数继承，我们要使用super关键字
构造函数有props属性数据参数，为了继承它，我们要将props参数传递给super方法
super(props);
如果不传递：在构造函数中，this.props目前是undefined
由于继承了props，所以在构造函数中props和this.props没有区别了
初始化状态
在构造函数中，通过为this.state赋值即可。
注意：由于在构造函数中，我们可以访问属性数据，因此我们可以用属性数据为状态数据赋值，这样可以实现数据有外部流入内部（工作中常见）
修改状态数据
组件提供了一个this.setState的方法，可以在组件内部修改状态数据
参数是对象
key表示状态属性数据名称
value表示状态数据值
注意：无论是组件的属性数据发生改变，还是状态数据发生改变，组件都会执行render方法。
// 无状态组件内部不需要维护数据，因此可以简写成函数
let Demo = () => <button>按钮</button>
// 定义换一换组件
class Demo extends Component {
// 初始化状态数据
constructor(props) {
// 构造函数继承
super(props);
// console.log(this.props, props)
// 初始化状态
this.state = {
num: 0
}
}
// 定义子视图列表
createChildList(arr) {
// 将数组成员转成span
return arr.map((item, index) => <span key={index}>{item}</span>)
}
// 创建新闻列表
createList() {
// console.log(this)
// 获取数据长度
let len = this.props.data.length;
return this.props.data.map((item, index) => {
// 遍历第二维数组,如果num与index相等，要显示
return <li key={index} style={{
display: this.state.num % len === index ? '' : 'none'
}}>{this.createChildList(item)}</li>
})
}
// 事件回调函数
toggle() {
// 更新num
// var num = this.state.num;
// // 下一页
// num++;
// 更新状态
// this.setState({ num })
// 简化成一步
this.setState({
// 先加再更新
num: ++this.state.num
})
}
// 定义渲染方法
render() {
return (
<div>
{/*<span onClick={this.toggle.bind(this)}>换一换</span>*/}
<span onClick={e => this.toggle(e)}>换一换</span>
{/*新闻列表*/}
<ul>{this.createList()}</ul>
</div>
)
}
}相关文章