在 react 中调用多个 onclick 函数
在 react 中调用多个 onclick 函数：
- 在元素上设置 onclick 属性。
- 在事件处理函数中调用其他函数。
- 事件处理函数可以根据需要调用尽可能多的其他函数。
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 属性，因此每次单击它时，都会调用提供的事件处理函数。
事件处理函数将事件对象作为参数并调用 sum() 和 multiply() 函数。
我们可以使用此方法在单个事件处理程序中根据需要调用尽可能多的函数。
在 jsx 代码之外提取事件处理程序
另一种更易读的方法是在 jsx 代码之外提取事件处理函数。
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}>clickbutton>
div>
);
}
每次单击按钮时，都会调用 handleclick 函数并将事件对象传递给它。
const handleclick = event => {
console.log(event.target);
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
};
我们可以根据需要在 handleclick 函数中调用尽可能多的其他函数。
如果任何函数需要将事件对象作为参数，请确保在调用中转发它。
请注意，我们正在将一个函数传递给 onclick 属性，而不是调用一个函数的结果。
如果将调用 handleclick 函数的结果传递给 onclick 属性，例如 onclick={handleclick()}，该函数会在页面加载时立即被调用，这不是我们想要的。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
node.js 与 react js 的比较
发布时间：2023/03/27 浏览次数：173 分类：node.js
-
本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 typescript 中 react usestate 钩子类型
发布时间：2023/03/19 浏览次数：246 分类：
-
本教程演示了如何在 typescript 中使用 react usestate hook。
在 react 中循环遍历对象数组
发布时间：2023/03/18 浏览次数：602 分类：react
-
在 react 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function app (
获取 react 中元素的类名
发布时间：2023/03/18 浏览次数：340 分类：react
-
在 react 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onclick 属性设置为事件处理函数。 访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons
如何将 key 属性添加到 react 片段
发布时间：2023/03/18 浏览次数：206 分类：react
-
使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react
如何在 react 中删除事件监听器
发布时间：2023/03/15 浏览次数：592 分类：react
-
在 react 中删除事件监听器： 在 useeffect 挂钩中添加事件侦听器。 从 useeffect 挂钩返回一个函数。 当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r
发布时间：2023/03/15 浏览次数：261 分类：react
-
react 中在 map() 中使用条件： 在数组上调用 map() 方法。 使用 if 条件，如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function app () { const arr =
在 react 中按类名查找所有元素
发布时间：2023/03/15 浏览次数：268 分类：react
-
在 react 中通过 classname 查找所有元素： 使用 getelementsbyclassname 方法获取具有特定类的所有元素。 将对该方法的调用放在 useeffect() 钩子中。 import {useeffect} from react ; const app = () = { useef
