在 react 组件中, 每个方法的上下文都会指向该组件的实例, 即自动绑定 this 为当前组件, 而且 react 还会对这种引用进行缓存, 以达到 cpu 和内存的最大化在使用了 es6 class 或者纯函数时, 这种自动绑定就不复存在了, 我们需要手动实现 this 的绑定
React 事件绑定类似于 DOM 事件绑定, 区别如下:
1.React 事件的用驼峰法命名, DOM 事件事件命名是小写
2. 通过 jsx, 传递一个函数作为 event handler, 而不是一个字符串
3.React 事件不能通过返回 false 来阻止默认事件, 需要显式调用 preventDefault()
如下实例:
- <a href="#" onclick="console.log('The link was clicked.'); return false">
- Click me
- </a>
- class ActionLink extends React.Component {
- constructor(props) {
- super(props);
- }
- handleClick(e) {
- e.preventDefault();
- console.log('The link was clicked.');
- }
- render() {
- return (
- <a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
- );
- }
- }
ps:React 组件类的方法没有默认绑定 this 到组件实例, 需要手动绑定
以下是几种绑定的方法:
bind 方法
直接绑定是 bind(this) 来绑定, 但是这样带来的问题是每一次渲染是都会重新绑定一次 bind;
- class Home extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- };
- }
- del(){
- console.log('del')
- }
- render() {
- return (
- <div className="home">
- <span onClick={this.del.bind(this)}></span>
- </div>
- );
- }
- }
构造函数内绑定
在构造函数 constructor 内绑定 this, 好处是仅需要绑定一次, 避免每次渲染时都要重新绑定, 函数在别处复用时也无需再次绑定
- class Home extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- };
- this.del=this.del.bind(this)
- }
- del(){
- console.log('del')
- }
- render() {
- return (
- <div className="home">
- <span onClick={this.del}></span>
- </div>
- );
- }
- }
:: 不能传参
如果不传参数使用双冒号也是可以
- class Home extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- };
- }
- del(){
- console.log('del')
- }
- render() {
- return (
- <div className="home">
- <span onClick={::this.del}></span>
- </div>
- );
- }
- }
箭头函数绑定
箭头函数不仅是函数的'语法糖', 它还自动绑定了定义此函数作用域的 this, 因为我们不需要再对它们进行 bind 方法:
- class Home extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- };
- }
- del=()=>{
- console.log('del')
- }
- render() {
- return (
- <div className="home">
- <span onClick={this.del}></span>
- </div>
- );
- }
- }
来源: http://www.jb51.net/article/136115.htm