[英]clicking inner div to trigger outer div event
I have a React functional component that returns a div containing child divs.我有一个 React 功能组件,它返回一个包含子 div 的 div。 It comprises an Item , and is used by another component to populate a list of Item rows.
它包含一个Item ,并被另一个组件用于填充Item行的列表。 That list component gives each item an onClick event function, which I've placed on the outer div of each Item :
该列表组件为每个项目提供了一个onClick事件 function,我已将其放置在每个项目的外部 div 上:
import React from 'react';
const Item = props => {
const { itemid, data, onClick } = props;
return (
<div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
<div>
{itemid}
</div>
<div>
{data}
</div>
</div>
)
}
export default Item;
My thought is each entire Item row (both inner divs), when clicked, should trigger the onClick event attached to the outer div.我的想法是每个整个项目行(两个内部 div),当点击时,应该触发附加到外部 div 的onClick事件。 But nope - the inner divs above do not apparently inherit the onClick event from the outer div.
但是不——上面的内部 div 显然没有从外部 div 继承onClick事件。
The onClick event is only triggered by the inner divs if I attach it to them directly. onClick事件仅由内部 div 触发,如果我直接将其附加到它们。
Is there some way to have the inner divs inherit the onClick attached to the outer div?有没有办法让内部 div 继承附加到外部 div 的onClick ?
As it turns out, this seems to solve my problem:事实证明,这似乎解决了我的问题:
import React from 'react';
const Item = props => {
const { itemid, data, onClick } = props;
return (
<div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
<div style={{ pointerEvents: 'none' }}>
{itemid}
</div>
<div style={{ pointerEvents: 'none' }}>
{data}
</div>
</div>
)
}
export default Item;
I guess thepointerEvents: 'none' keeps the child divs from being clickable, so the outer div then takes the click.我猜pointerEvents: 'none'使子 div 不能被点击,所以外部 div 然后点击。
Still hoping for a better solution, as this seems a little strange.仍然希望有更好的解决方案,因为这似乎有点奇怪。
As suggested by @DucHong e.stopPropagation()
will prevent the parent element clicks if you put it in the click event of the child element.正如@DucHong
e.stopPropagation()
所建议的,如果您将其放在子元素的点击事件中,它将阻止父元素点击。
import React, { useState } from "react";
import './RowForm.css';
import { BsFillCheckSquareFill } from "react-icons/bs"
import { BookmarkTransaction, ChangeFormData, ClearTransaction } from "../../Accounts/Store/accountsSlice";
...
...
...
<tr
key={id}
onClick={(e) => {
dispatch(ChangeFormData({
isChecked: true,
formData: getValues()
}))
}}
>
<th className="checkbox-th">
<FormGroup check className="mt-2">
{isChecked ?
<BsFillCheckSquareFill
onClick={(e) => {
e.stopPropagation()
dispatch(ChangeFormData({
isChecked: false,
formData: getValues()
}))
}}
className='check-icon'
/>
:
<div
onClick={(e) => {
console.log("===>true bottom")
e.stopPropagation()
dispatch(ChangeFormData({
isChecked: true,
formData: getValues()
}))
}}
className='checkbox-wrapper'
/>
}
</FormGroup>
</th>
</tr>
...
...
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.