React在Component加上onclick事件處理器(Event Handler)的方式如下。
使用onclick事件作出以下效果。
使用普通的JavaScript。
<html>
<head>
</head>
<body>
<button value="Hello, world!" onclick="handleClick(this)">Click Me</button>
</body>
<script>
function handleClick(element) {
alert(element.getAttribute("value"))
}
</script>
</html>
在React Component的寫法如下。
Class Component
在React element加上onclick事件處理是以小駝峰命名，要寫成onClick，並指派事件處理函式名稱。
在Class Component中的callback函式要取得正確的this（也就是Component自己）必須在constructor()中以該函式呼叫bind(this)綁定this，即Component class，然後分派回自身的變數。
App.js
import React from "react";
import "./App.css";
function App() {
return <Button value="Hello, world!"/>;
}
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); // bind this
}
handleClick(e) {
alert(this.props.value)
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
export default App;
若不想寫bind(this)，可用箭頭函式(arrow function)宣告事件處理函式，此稱為class field寫法。
App.js
import React from "react";
import "./App.css";
function App() {
return <Button value="Hello, world!"/>;
}
class Button extends React.Component {
handleClick = (e) => {
alert(this.props.value)
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
export default App;
Function Component
在Function Compoment加入事件處理函式。
App.js
import React from "react";
import "./App.css";
function App() {
return <Button value='Hello, world!' />;
}
function Button(props) {
const handleClick = (e) => {
alert(props.value);
}
return <button onClick={handleClick}>Click Me</button>;
}
export default App;
沒有留言:
張貼留言