事件綁定的方法
① 在constructor 中 手動綁定
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 為了在回調(diào)中使用 `this`麸塞，這個綁定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
② 使用實(shí)驗(yàn)性屬性
class LoggingButton extends React.Component {
// 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。
// 注意: 這是 *實(shí)驗(yàn)性* 語法女气。
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
③ 在回調(diào)中使用箭頭函數(shù)
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
④ 使用函數(shù)的bind方式綁定
class LoggingButton extends React.Component {
handleClick(info) {
// 這種方式傳遞的參數(shù)，e會作為第二個參數(shù)隱形的傳入
console.log('this is:', this);
}
render() {
// 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定髓考。
return (
<button onClick={this.handleClick.bind(this,info)}>
Click me
</button>
);
}
}
使用箭頭函數(shù)的時候考慮一個情況就是：如果該回調(diào)函數(shù)作為 prop 傳入子組件時仁卷，這些組件可能會進(jìn)行額外的重新渲染
向事件處理函數(shù)中傳遞參數(shù)
①通過箭頭函數(shù)方式傳遞參數(shù)，e需要顯示的作為參數(shù)傳遞給處理函數(shù)
②通過函數(shù)的bind方式傳遞函數(shù)邀窃，e會默認(rèn)作為第二個參數(shù)傳遞給處理函數(shù)
deleteRow(id, e?) {
console.log(e)
console.log('刪除' + id)
}
<button onClick={this.deleteRow.bind(this, 2)} data-id="buttons">使用函數(shù)bind方式刪除一行</button>
<button onClick={(e) => { this.deleteRow(3, e) }} data-id="buttons">使用回調(diào)中加入箭頭函數(shù)方式刪除一行</button>
