在 React 中调用多个 onClick 函数
在 React 中调用多个 onClick 函数
作者:迹忆客 最近更新:2023/03/15 浏览次数:
在 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
属性,因此每次单击它时,都会调用提供的事件处理函数。
<button
onClick={event => {
console.log('function 1:', sum(5, 5));
console.log('function 2:', multiply(5, 5));
}}
>
Click
</button>
事件处理函数将事件对象作为参数并调用 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}>Click</button>
</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 属性,而不是调用一个函数的结果。
<button onClick={handleClick}>Click</button>
如果将调用 handleClick
函数的结果传递给 onClick
属性,例如 onClick={handleClick()}
,该函数会在页面加载时立即被调用,这不是我们想要的。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。