網頁

▼

2021/7/26

React onclick 事件處理範例

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;


沒有留言:

張貼留言