React 元素的事件處理和 DOM 元素類似。但是有一點語法上的不同:
- React 事件綁定屬性的命名采用駝峰式寫法，而不是小寫。
- 如果采用 JSX 的語法你需要傳入一個函數作為事件處理函數，而不是一個字符串(DOM 元素的寫法)
HTML 通常寫法是：
<button onclick="activateLasers()">
激活按鈕
</button>
React 中寫法為：
<button onClick={activateLasers}>
激活按鈕
</button>
- 在 React 中不能使用返回 false 的方式阻止默認行為， 必須明確的使用 preventDefault。
例如，通常我們在 HTML 中阻止鏈接默認打開一個新頁面，可以這樣寫：
<a href="#" onclick="console.log('點擊鏈接'); return false">
點擊
</a>
在 React 的寫法為：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('鏈接被點擊');
}
return (
<a href="#" onClick={handleClick}>
點擊
</a>
);
}
- 類的方法默認是不會綁定 this 的。如果你忘記綁定 this.handleClick 并把它傳入 onClick, 當你調用這個函數的時候 this 的值會是 undefined。在ES6中通常使用箭頭函數來避免這個問題。
class LoggingButton extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 方法一：使用bind為了在回調中使用 `this`，這個綁定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
// 方法二：使用實驗性的public class fields 語法，此語法確保 `handleClick` 內的 `this` 已被綁定。
// 注意: 這是 *實驗性* 語法。我通常使用此種方法。
// create-react-app 默認啟用此語法。
// 如果沒有使用 class fields 語法，可以在回調中使用箭頭函數(方法三)
handleClick = () => {
console.log('this is:', this);
}
render() {
// 方法一、方法二的return，使用方法三則不需要此部分
return (
<button onClick={this.handleClick}>
Click me
</button>
);
// 方法三：此語法確保 `handleClick` 內的 `this` 已被綁定。
return (
<button onClick={(e) => this.handleClick(e)}>
點擊
</button>
);
}
}
向事件處理程序傳遞參數
通常我們會為事件處理函數傳遞額外的參數。例如，若 id 是你要刪除那一行的 ID，以下兩種方式都可以向事件處理函數傳遞參數：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述兩種方式是等價的，分別通過箭頭函數和Function.prototype.bind來實現。
在這兩種情況下，React 的事件對象 e 會被作為第二個參數傳遞。如果通過箭頭函數的方式，事件對象必須顯式的進行傳遞，而通過 bind 的方式，事件對象以及更多的參數將會被隱式的進行傳遞。
值得注意的是，通過 bind 方式向監聽函數傳參，在類組件中定義的監聽函數，事件對象 e 要排在所傳遞參數的后面
class Test extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
testFunc(name, e){ //事件對象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* 通過 bind() 方法傳遞參數。 */}
<a href="#" onClick={this.testFunc.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
