處理使用者事件
事件可讓您在應用程式中執行程式碼以回應使用者動作。 由於 JSX 是以 JavaScript、XML 和 HTML 為基礎而建置,因此新增事件接聽程式的效果感覺起來會相當熟悉。
您可以將屬性新增至 HTML,以指出要處理的事件名稱。 例如,如果想要在選取按鈕時用 alert
來顯示訊息,可以使用下列程式碼:
class Demo extends React.Component {
render() {
<button onClick={ () => alert('Hello, world!') }>Click me!</button>
}
}
您的疑問是對的,我們也可以建立函式來接聽事件。 我們會將函式新增至元件。 然後使用 alert
的相同語法來呼叫。
class Demo extends React.Component {
displayMessage() {
alert('Hello, world!');
}
render() {
<button onClick={ () => displayMessage() }>Click me!</button>
}
}
也可以視需要將參數傳遞至事件處理常式。
class Demo extends React.Component {
displayMessage(message) {
alert(message);
}
render() {
<button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
}
}