React MUI Chip onDelete 访问 stopPropagation 方法

Question

I have a Chip like:

  const onDelete = (e) => {
    e.stopPropagation();
    // e.nativeEvent.stopPropagation();
  };
  return (
    <Chip
      label={name}
      sx={sx}
      component={NavLink}
      to={to}
      clickable={true}
      onDelete={onDelete}
    />);

None of the calls stopPropagation() worked, because they are undefined on the Event sent by MUI to the onDelete callback.

Is there anyway I can prevent this chip to follow the Link in to attribute if user clicked to Delete?

Answer 1

The stopPropagation() prevents further propagation of the current event but redirecting to links are still processed. If you want to stop those behaviors, you can use preventDefault() method :

const onDelete = (e) => {
    e.preventDefault();
    // e.nativeEvent.stopPropagation();
  };