處理使用者事件

3 分鐘

事件可讓您在應用程式中執行程式碼以回應使用者動作。由於 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>
    }
}

繼續

處理使用者事件

意見反應