Javascript 作为按钮功能的可点击div

我在“CZButton”组件中有一个按钮功能，该按钮用于“personlist”中的弹出窗口，我正在尝试使“personlist”或“person”中的div卡可点击，这样代替点击按钮，div将被点击并显示抽屉弹出窗口

我尝试在divs中添加onclick，但似乎没有达到抽屉功能。这里是一个沙盒片段，希望能得到帮助

---

您可以在React中添加onClick侦听器，只需编写如下内容：

// omitting the rest of the render function for brevity
return (
    <div className="row" onClick={e => console.log("Clicked")}></div>
);

//为了简洁起见，省略了渲染函数的其余部分
返回(
console.log（“单击”）}>
);

---

只是要注意HTML语义。虽然这是可能的，但我并不建议将onClick事件添加到

div

。关于HTML5标准以及您应该遵守的内容，网上有很多很好的资源。

现场演示：

App.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();

    this.test = this.test.bind(this);
  }

  test() {
    alert("function executed on clicking div");
  }

  render() {
    return (
      <div>
        <div
          onClick={() => this.test()}
          className="interactivediv fa fa-window-close"
        >
          div
        </div>
      </div>
    );
  }
}

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

.App {
  font-family: sans-serif;
  text-align: center;
}

.interactivediv {
  height: 150px;
  width: 150px;
  background: rgb(68, 196, 196);
  cursor: pointer;
   border: 1px solid grey;
}

.interactivediv:active {
  border: 2px solid black;
}

---

抽屉

的代码在按钮组件及其状态中进行编码。。您必须将相应的代码移动到Person组件，并在那里添加

onClick

。这是否回答了您的问题？