点击内部 div 触发外部 div 事件

Question

我有一个 React 功能组件，它返回一个包含子 div 的 div。 它包含一个Item ，并被另一个组件用于填充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;

我的想法是每个整个项目行（两个内部 div），当点击时，应该触发附加到外部 div 的onClick事件。 但是不——上面的内部 div 显然没有从外部 div 继承onClick事件。

onClick事件仅由内部 div 触发，如果我直接将其附加到它们。

有没有办法让内部 div 继承附加到外部 div 的onClick ？

Answer 1

事实证明，这似乎解决了我的问题：

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;

我猜pointerEvents: 'none'使子 div 不能被点击，所以外部 div 然后点击。

仍然希望有更好的解决方案，因为这似乎有点奇怪。

Answer 2

正如@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>

       ...
       ...
       ...