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;
顯示如下。
沒有留言:
張貼留言