网页是组件构成的&＃xff0c;组件是一系列标签形成的单一功能。所以考虑组件无非也就三件事&＃xff0c;结构、表现、和行为。结构JSX搞定了&＃xff08;当然JSX不仅仅干这个&＃xff09;&＃xff0c;表现是CSS的事儿&＃xff0c;我们重点说下行为&＃xff0c;也就是事件和钩子。
事件好说&＃xff0c;就是户干了啥事儿&＃xff0c;然后有什么样的相应。钩子就是在组件怎么样的时候&＃xff0c;干什么事儿。
本文先说事件&＃xff0c;因为这个简单的让人发指&＃xff0c;钩子用到了我们再说。
事件还是老话&＃xff0c;你把原生组件我讲那篇文章看懂了&＃xff0c;react就很轻松了&＃xff0c;我们先走起一个例子。
大家可以直接使用我准备好的起始文件&＃xff0c;替换你的src整个文件夹就行。
地址&＃xff1a;https://github.com/leolau2012/react-basic-tutorial.git
React中事件的写法
先别管别的&＃xff0c;我们现在RatingStar.js里面扔进去&＃xff0c;以下&＃xff1a;
import React, { Component } from &＃39;react&＃39;
import &＃39;./style.css&＃39;
class RatingStar extends Component {constructor(props) {super(props)this.state &＃61; {score: 0}}handleClick(ev) {console.log(ev.target);}render() {return (4分
);}
}
export default RatingStar;
这里要注意两点&＃xff1a;
1.onClick &＃61; {this.handleClick} 这里的事件都要加on而且Click要大写
2.this.handleClick 需被单大括号包裹
this的问题
说重点了&＃xff0c;但是往回看最开始的例子大家就知道代码是这样的&＃xff1a;
handleClick(ev) {this.setState({score: Number(ev.target.dataset.index) &＃43; 1});
}
但是&＃xff0c;我们加上去以后居然报错了&＃xff0c;
我们先看一眼this是谁&＃xff0c;
大家先不用急&＃xff0c;容我慢慢解释。
下面就是最重要的一个东西 -关于组件里面的this问题。
一般在某个类的实例方法里面的 this 指的是这个实例本身。但是在上面我们把 this 打印出来&＃xff0c;你会看到 this 是undefined。
这是因为 React.js 调用你所传给它的方法的时候&＃xff0c;并不是通过对象方法的方式调用&＃xff08;this.handleClick&＃xff09;&＃xff0c;而是直接通过函数调用 handleClick所以事件监听函数内并不能通过 this 获取到实例。而严格模式下直接全局调用一个函数&＃xff0c;它的this是undefined。这里注意你可以不懂我说的上面这些话&＃xff0c;但是你会解决就好了。这个在我们原生js组件又遇到过这个情况说后面解释。这里我们解释了。
解决this的指向
解决方案也简单&＃xff1a;
handleClick &＃61; (ev)&＃61;> {console.log(this);
}
这样就可以了&＃xff0c;很多人会用bind 矫正this 我不建议&＃xff0c;尽量大家多用箭头函数。
最终代码&＃xff1a;
import React, { Component } from &＃39;react&＃39;
import &＃39;./style.css&＃39;
class RatingStar extends Component {constructor(props) {super(props)this.state &＃61; {score: 0}}handleClick &＃61; (ev)&＃61;> {console.log(this.setState);this.setState({score: Number(ev.target.dataset.index) &＃43; 1});}render() {return ( 4分
);}
}
export default RatingStar;
最终大家会发现setState就有了&＃xff0c;而且事件也好了。这篇文章我们讲事件怎么用&＃xff0c;下篇我们说组件的 state 和 setState。
结语&＃xff1a;
1.通过onClick事件在React中的使用&＃xff0c;举一反三使用 React.js 提供了一系列的 on* 事件。
2.this调用不加括号&＃xff0c;class变成className。
额外&＃xff1a;将代码下载下来注意组件的组织。
京公网安备 11010802041100号