Reactjs 在目标单击时从父级冒泡到子级的事件

我试图在React中呈现一个表，并使行可单击。表行可能包含具有按钮或其他可单击元素的单元格，但是，如果表单元格包含可单击元素，我不希望在单击单元格元素时调用row onClick函数

由于某种原因，这些事件的传播与我预期的相反。从父（行）到子（单元格），因此当我单击单元格中的复选框时，onClick回调的顺序是Row->checkbox

因为更具体的onClick处理程序是在行的onClick函数之后调用的，所以我无法像最初打算的那样取消事件传播

我已经从MDN和react on events中查看了文档，但是从我所知道的情况来看，事件的顺序应该是Cell->Row

我考虑使用一个行的ref&将其与目标进行比较，但不必为每一行存储ref

行代码：

<TableRow 
    key={keyedItem.key}
    selected={this.isItemSelected(keyedItem.key)}
    hover={true} 
    onClick={(event) => this.handleRowClicked(event, keyedItem)}
>
    {this.renderCheckBox(keyedItem.key)}
    {this.props.renderRowCells(keyedItem.item)}
</TableRow>

this.handleRowClicked（事件，keyedItem）}
>
{this.renderCheckBox（keyedItem.key）}
{this.props.renderRowCells（keyedItem.item）}

上面的renderCheckbox（键）函数

private renderCheckBox(key: string) {
        if (this.multiSelectionMode()) {
            return (
                <TableCell padding="checkbox">
                    <Checkbox
                        checked={this.isSelected(key)}
                        onChange={(event, checked: boolean) => { console.log(event.target); this.changeItemSelection(key, checked); }}
                   />
                </TableCell>
            );
        }
        return null;
    }

private renderCheckBox（键：字符串）{
if（this.multiSelectionMode（））{
返回(
{console.log（event.target）；this.changeItemSelection（key，checked）；}
/>
);
}
返回null；
}

---

有人知道我可能做错了什么吗？或者这是否按预期工作？

要防止此类事件冒泡，可以做的一件事是定义一个开关案例。您可以按其类名筛选导致事件的目标，然后为每种情况应用您的逻辑

下面是一个代码沙盒，供您查看它的运行情况：

父母亲

从“React”导入React；
从“/Child”导入子项；
类父类扩展了React.Component{
状态={
单元格：[
{value:1，selected:false}，
{value:2，selected:false}，
{值：3，所选值：false}
]
};
handleClickEvents=事件=>{
var target=event.target.className；
交换机（目标）{
案例“家长”：
返回console.log（目标）；
“儿童”案：
返回此.findCheckedInput（事件）；
违约：
回来
}
};
findCheckedInput=事件=>{
const updatedCells=this.state.cells.map（cell=>{
if（cell.value==event.target.value）{
返回{
单间牢房
选定：！cell.selected
};
}否则{
返回单元；
}
});
这是我的国家(
{
单元格：更新的单元格
},
（）=>console.log（this.state）
);
};
renderChildren=（）=>{
const{cells}=this.state；
返回单元格.map（项=>{
返回(
);
});
};
render（）{
返回(
{this.renderChildren（）}
);
}
}
导出默认父对象；

小孩

从“React”导入React；
子类扩展了React.Component{
handleOnClick=（）=>{
this.props.handleClick（）；
};
render（）{
返回(
);
}
}
导出默认子对象；

Hi Liam，刚刚给你写了一个答案，如果对你有效，请告诉我：）

import React from "react";
import Child from "./Child";

class Parent extends React.Component {
  state = {
    cells: [
      { value: 1, selected: false },
      { value: 2, selected: false },
      { value: 3, selected: false }
    ]
  };
  handleClickEvents = event => {
    var target = event.target.className;
    switch (target) {
      case "parent":
        return console.log(target);
      case "child":
        return this.findCheckedInput(event);
      default:
        return;
    }
  };

  findCheckedInput = event => {
    const updatedCells = this.state.cells.map(cell => {
      if (cell.value == event.target.value) {
        return {
          ...cell,
          selected: !cell.selected
        };
      } else {
        return cell;
      }
    });

    this.setState(
      {
        cells: updatedCells
      },
      () => console.log(this.state)
    );
  };

  renderChildren = () => {
    const { cells } = this.state;
    return cells.map(item => {
      return (
        <Child
          key={item.value}
          handleClick={this.handleClickEvents}
          value={item.value}
          selected={item.selected}
        />
      );
    });
  };

  render() {
    return (
      <div
        className="parent"
        style={{ background: "green" }}
        onClick={this.handleClickEvents}
      >
        {this.renderChildren()}
      </div>
    );
  }
}

export default Parent;

import React from "react";

class Child extends React.Component {
  handleOnClick = () => {
    this.props.handleClick();
  };

  render() {
    return (
      <input
        className="child"
        onChange={this.handleOnClick}
        type="checkbox"
        checked={this.props.selected}
        value={this.props.value}
      />
    );
  }
}

export default Child;