javascript - 在没有 Canvas 的情况下获取按钮单击事件

Question

如何为按钮和 ListItem 设置 2 个不同的点击事件？
我主要对没有 ListItem 事件的按钮点击事件感兴趣。

CodeSandobox DEMO

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

function App() {
  const handleButtonClick = () => {
    console.log("button click");
  };
  const handleListItemClick = () => {
    console.log("list click");
  };
  return (
    <ListItem button onClick={() => handleListItemClick()}>
      <button onClick={() => handleButtonClick()}>
        get only the button click
      </button>
      <ListItemText primary="without the ListItem click event..." />
    </ListItem>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

请检查一下

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

function App() {
  const handleButtonClick = e => {
    e.stopPropagation();
    console.log("button click");
  };
  const handleListItemClick = () => {
    console.log("list click");
  };
  return (
    <ListItem button onClick={() => handleListItemClick()}>
      <button onClick={e => handleButtonClick(e)}>
        get only the button click
      </button>
      <ListItemText primary="without the ListItem click event..." />
    </ListItem>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);