在没有画布的情况下获取按钮单击事件

时间:2019-05-09 15:53:49

标签: javascript reactjs material-ui

如何为按钮和ListItem设置2个不同的单击事件?
最感兴趣的是没有ListItem事件的按钮单击事件。

CodeSandobox DEMO

ALTER TABLE `maps`
ADD INDEX (`uid`);

ALTER TABLE `maps`
ADD INDEX (`add_time`);

ALTER TABLE `maps`
ADD INDEX (`sid`);

ALTER TABLE `follows`
ADD INDEX (`fid`);

1 个答案:

答案 0 :(得分: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);