React 傳參數至事件處理器 pass data to component event handler

React將資料參數傳入至事件處理器(Event Handler)的方式如下。

例如下面依字串陣列names中的每個名稱產生一個按鈕，點擊按鈕以alert顯示該名稱。onClick設為arrow function呼叫handClick()事件處理函式並傳入參數。

App.js

import "./App.css";

function App() {
  return <Button />;
}

const names = ["John", "Mary", "Tony"]

function Button(props) {

  const handleClick = (e, name) =>  {
    alert(`Hello, ${name}!`);
  }

  return names.map((v, i) => {
    return (
      <button key={i} onClick={e => handleClick(e, v)}>
        {v}
      </button>
    )
  })
}

export default App;

顯示如下。

• React - 事件處理 - 將參數傳給 Event Handler
• React onclick 事件處理範例
• React JSX 迴圈產生Components