Calling multiple onClick functions in React
Calling multiple onClick functions in React:
- Sets the onClick attribute on the element.
- Call other functions in the event handling function.
- An event handling function can call as many other functions as needed.
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>
);
}
We set onClick
the property on the button, so each time it is clicked, the provided event handler function will be called.
<button
onClick={event => {
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
}}
>
Click
</button>
The event handler takes the event object as a parameter and calls the sum()
and multiply()
functions.
We can use this method to call as many functions as needed in a single event handler.
Extract event handlers outside of JSX code
Another more readable approach is to extract the event handlers outside of the JSX code.
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>
);
}
Each time the button is clicked, handleClick
the function is called and the event object is passed to it.
const handleClick = event => {
console.log(event.target);
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
};
We can handleClick
call as many other functions from within a function as we want.
If any function expects an event object as an argument, make sure to forward it in the call.
请注意
, we are passing a function to the onClick property, rather than the result of calling a function.
<button onClick={handleClick}>Click</button>
If you pass the result of calling handleClick
a function to onClick
the property, for example onClick={handleClick()}
, the function will be called immediately when the page loads, which is not what we want.
For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.
Related Articles
How to reverse an array in React
Publish Date:2025/03/13 Views:198 Category:React
-
在 React 中反转数组:使用扩展语法 `(...)` 创建数组的浅表副本。在副本上调用 `reverse()` 方法。将结果存储在变量中。
Setting data attributes in React
Publish Date:2025/03/13 Views:84 Category:React
-
要在 React 中为元素设置 data 属性,请直接在元素上设置属性,例如 或使用 setAttribute() 方法,例如 el.setAttribute('data-foo', 'bar')。 我们可以访问事件对象上的元素或
Toggle a class on click in React
Publish Date:2025/03/13 Views:153 Category:React
-
要在 React 中单击时切换类:在元素上设置 onClick 属性。将活动状态存储在状态变量中。使用三元运算符有条件地添加类。
Sorting an array of objects in React
Publish Date:2025/03/13 Views:77 Category:React
-
在 React 中对对象数组进行排序: 创建数组的浅拷贝。 调用数组的 `sort()` 方法,传递给它一个函数。 该函数用于定义排序顺序。
Generate a random number in React
Publish Date:2025/03/13 Views:189 Category:React
-
使用 Math.random() 函数在 React 中生成一个随机数,例如 Math.floor(Math.random() * (max - min + 1)) + min。 Math.random 函数返回 0 到小于 1 范围内的数字,但也可用于生成特定范围内的数字。
Open links in new tabs with React
Publish Date:2025/03/13 Views:76 Category:React
-
要在 React 的新选项卡中打开链接,请使用 a 元素并将其 `target` 属性设置为 _blank,例如 。 _blank 值表示资源已加载到新选
How to set target=_blank in React
Publish Date:2025/03/13 Views:199 Category:React
-
要在 React 中将元素的目标属性设置为 _blank,请使用锚元素并设置 rel 属性,例如 。 _blank 值表示资源已加载到新选项卡中。
Showing hover elements in React
Publish Date:2025/03/13 Views:177 Category:React
-
要在 React 中显示悬停元素:在元素上设置 `onMouseOver` 和 `onMouseOut` 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染其他元素。
Passing components as props in React
Publish Date:2025/03/13 Views:164 Category:React
-
我们可以使用内置的 children 属性在 React 中将组件作为属性 props 传递。 我们在组件的开始标签和结束标签之间传递的所有元素都会分配给 children 属性。