按钮触发 MUI DataGrid 的 onRowClick，尽管 stopPropagation

Question

我在一行

DataGrid

内设置一个按钮来执行自己的操作。然而，尽管

stopPropagation

和

preventDefault

，它仍然会触发该行的行为。

这里有一个功能齐全的示例。

export default function App() {
  const fileInputRef = useRef(null);
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const file = e.target.files[0];
    console.log("Archivo seleccionado:", file);
  };
  const handleRowClick = (rowData, event) => {
    const isButtonClick = event.target.id === "examinar";
    if (!isButtonClick) {
      console.log(rowData.row.url);
      setSelectedFile(rowData.row.url);
    }
  };
  const handleButtonClick = (e) => {
    e.stopPropagation();
    fileInputRef.current.click();
  };
  const handleCloseDrawer = () => {
    setSelectedFile(null);
  };

  return (
    <div className="App">
      <DataGrid
        onRowClick={handleRowClick}
        rows={[
          {
            id: 0,
            name: "Qbert",
            url: "https://upload.wikimedia.org/wikipedia/en/7/7c/Q%2Abert_arcade_cabinet.jpg",
          },
          {
            id: 1,
            name: "Pong",
            url: "https://www.museumofplay.org/app/uploads/2020/11/Pong-arcade-game-1972.-The-Strong-Rochester-New-York.-694x1024.jpg",
          },
        ]}
        columns={[
          {
            field: "id",
            headerName: "id",
            flex: 1,
            minWidth: 200,
            maxWidth: 350,
          },
          { field: "name", headerName: "name", flex: 1, maxWidth: 70 },
          { field: "button", headerName: "button", flex: 1, maxWidth: 70 },
          {
            field: "actions",
            headerName: "actions",
            minWidth: 250,
            maxWidth: 350,
            renderCell: (params) => (
              <div style={{ display: "flex", gap: "5px" }}>
                <input
                  type="file"
                  ref={fileInputRef}
                  style={{ display: "none" }}
                  onChange={handleFileChange}
                />
                {
                  <button
                    id="examinar"
                    title="Ver"
                    variant="contained"
                    color="primary"
                    style={{ width: "fit-content", zIndex: "30" }}
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      handleButtonClick(e);
                    }}
                  >
                    Select File
                  </button>
                }
              </div>
            ),
          },
        ]}
      ></DataGrid>
      <Drawer
        PaperProps={{
          sx: { width: "50vw" },
        }}
        anchor="right"
        open={!!selectedFile}
        onClose={handleCloseDrawer}
      >
        <Box
          sx={{
            width: "50%",
            background: "grey",
          }}
        >
         <div style={{ width: "100%", height: "100%" }}>
        <img src={selectedFile} width={850} alt="contenido del documento" />
      </div>
        </Box>
      </Drawer>
    </div>
  );
}

Answer 1

您输入时缺少 e.stopPropagation

 <input
     type="file"
     ref={fileInputRef}
     style={{ display: "none" }}
     onChange={handleFileChange}
     onClick={(e) => e.stopPropagation()}
/>