6 react 事件繫結

1. 事件繫結方式一：全域性方法返回react dom 方式繫結

function
actionlink() 
//使用 onclick= 繫結事件
return
( 
click me
);}var element = actionlink() //
返回乙個reactdom
class parent extends react.component 
render () 
//掛載reactdom
) }
}

2. 繫結事件方式二：成員方法繫結

構造方法中改變this指向： this.handleclick = this.handleclick.bind(this);

rend 方法的dom中繫結事件： onclick=>

class toggle extends react.component ;
//為了在**中使用 `this`，這個繫結是必不可少的
this.handleclick = this.handleclick.bind(this
); }
handleclick() ));
} render() >
); }
}reactdom.render( ,
document.getelementbyid('root')
);

3. 如果不使用function.prototype.bind 改變 this 指向，怎麼繫結事件？有兩種方式：

方式1：使用 public class fields 語法。官方建議使用該方式。

方式2：使用箭頭函式。每次渲染都會建立不同的**。如果該**作為引數傳遞給子元件時，會觸發重新渲染，有效能問題。

//
方式1class loggingbutton extends react.component 
render() >click me
); }
}

//
方式2class loggingbutton extends react.component 
render() >click me
); }
}

4. 事件處理函式中傳遞引數

// 1. 箭頭函式傳遞引數
this.deleterow(id, e)}>delete row
// 2. 普通方式
this.deleterow.bind(this, id)}>delete row
// 3. 匿名函式
delete row

class loggingbutton extends react.component 
handleclick2(id, e) 
render() > // 事件物件 和 其他引數傳遞click me 1
this.handleclick2.bind(this, "id2")}> // 實參傳遞， 預設傳遞事件對物件為第二個引數click me 2
); }
}reactdom.render( ,
document.getelementbyid('root')
);

注意事項：

1. react 中事件預設行為不能通過 return false 阻止，必須 e.preventdefault();

2. react 中的事件物件 e 不是原生的事件物件，是包裝後的；

this.deleterow.bind(this, id)

6 react中的互動

1.ajax 再react中使用ajax和直接使用ajax的用法是完全一樣的，只要找好路徑即可，但是也有不一樣的地方，再react中是通過改變狀態state來達到讓元件重新渲染的效果，並且放ajax的鉤子函式一般會放在例項化期的componentdidmount中，因為再這個時候真實已經渲染完成了 ...

React 事件繫結

一 class方式定義元件事件繫結的幾種方法一在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二在呼叫的時候使用bind去繫結this 1 ...

6 react 事件繫結

6 react中的互動

React 事件繫結

React 事件繫結

相關推薦