Question

在React中，当将开关按钮置于重定向组件内部时，是否可以禁用重定向？

我有一个可单击的TableRow，它可以重定向到另一个组件，并且内部有一个切换按钮（复选框），

TableRow组件及其TableCell和内部的Switch按钮：

<TableRow
   className="h-40 cursor-pointer"
   hover
   role="checkbox"
   aria-checked={isSelected}
   tabIndex={-1}
   key={n.id}
   selected={isSelected}
   onClick={event => handleClick(n)}
>
  <TableCell component="th" scope="row" align="left">
    <Switch
     checked={state.checkedB}
     onChange={handleChange("checkedB")}
     value="checkedB"
    />
  </TableCell>
</TableRow>

这是handleChange功能和“切换”按钮的状态：

const [state, setState] = React.useState({
   checkedB: true,
});

const handleChange = name => event => {
   setState({ ...state, [name]: event.target.checked });
};

这是handleClick组件中的TableRow函数，该函数重定向到另一个组件：

function handleClick(item){
    props.history.push('/apps/fournisseurs/'+item.id+'/'+ item.handle);
}

Answer 1

当您单击event.stopPropagation()时，您将要停止传播（Switch）。这将阻止事件在整个链中冒泡，并且实质上将“忽略”父点击处理程序（在这种情况下为onClick）。

const handleChange = name => event => {
  event.stopPropagation();
  setState({ ...state, [name]: event.target.checked });
};

<TableRow
   className="h-40 cursor-pointer"
   hover
   role="checkbox"
   aria-checked={isSelected}
   tabIndex={-1}
   key={n.id}
   selected={isSelected}
   onClick={event => handleClick(n)}
>
  <TableCell component="th" scope="row" align="left">
    <Switch
     checked={state.checkedB}
     onChange={handleChange("checkedB")}
     value="checkedB"
     onClick={e => e.stopPropagation()}
    />
  </TableCell>
</TableRow>

编辑：

不幸的是，找到另一个answer之后，上述代码才能起作用，那就是向Switch的{{1}}组件中添加一个附加处理程序

在React中选中子复选框时防止触发父点击事件

1 个答案: