如何在 React 中調(diào)用多個 onClick 函數(shù)
在 React 中調(diào)用多個 onClick 函數(shù)：
- 在元素上設置 onClick 屬性。
- 在事件處理函數(shù)中調(diào)用其他函數(shù)。
- 事件處理函數(shù)可以根據(jù)需要調(diào)用盡可能多的其他函數(shù)。
export default function App() {
const sum = (a, b) => {
return a + b;
};
const multiply = (a, b) => {
return a * b;
};
return (
<div>
<button
onClick={event => {
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
}}
>
Click
</button>
</div>
);
}
我們在按鈕上設置了 onClick 屬性，因此每次單擊它時，都會調(diào)用提供的事件處理函數(shù)。
<button
onClick={event => {
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
}}
>
Click
</button>事件處理函數(shù)將事件對象作為參數(shù)并調(diào)用 sum() 和 multiply() 函數(shù)。
我們可以使用此方法在單個事件處理程序中根據(jù)需要調(diào)用盡可能多的函數(shù)。
在 JSX 代碼之外提取事件處理程序
另一種更易讀的方法是在 JSX 代碼之外提取事件處理函數(shù)。
export default function App() {
const sum = (a, b) => {
return a + b;
};
const multiply = (a, b) => {
return a * b;
};
const handleClick = event => {
console.log(event.target);
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
};
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}
每次單擊按鈕時，都會調(diào)用 handleClick 函數(shù)并將事件對象傳遞給它。
const handleClick = event => {
console.log(event.target);
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
};我們可以根據(jù)需要在 handleClick 函數(shù)中調(diào)用盡可能多的其他函數(shù)。
如果任何函數(shù)需要將事件對象作為參數(shù)，請確保在調(diào)用中轉(zhuǎn)發(fā)它。
請注意 ，我們正在將一個函數(shù)傳遞給 onClick 屬性，而不是調(diào)用一個函數(shù)的結果。
<button onClick={handleClick}>Click</button>如果將調(diào)用 handleClick 函數(shù)的結果傳遞給 onClick 屬性，例如 onClick={handleClick()}，該函數(shù)會在頁面加載時立即被調(diào)用，這不是我們想要的。
到此這篇關于在 React 中調(diào)用多個 onClick 函數(shù)的文章就介紹到這了,更多相關React調(diào)用多個 onClick 函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了react實現(xiàn)可播放的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要跟大家介紹了關于React-Native中一些常用組件的用法的相關資料，其中詳細介紹了關于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡請求等相關內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關理解，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
圖片識別這個功能在很多app中都有,下面這篇文章主要給大家介紹了關于如何利用React實現(xiàn)圖片識別App的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
ReactNative實現(xiàn)圖片上傳功能的示例代碼
本篇文章主要介紹了ReactNative實現(xiàn)圖片上傳功能的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
React Native使用Modal自定義分享界面的示例代碼
本篇文章主要介紹了React Native使用Modal自定義分享界面的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結構的數(shù)據(jù),并允許用戶選擇多個節(jié)點,感興趣的可以了解下2024-01-01
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11