样式化组件 (DIV) 上的 onClick 事件处理

Posted 2023-02-22

【中文标题】样式化组件 (DIV) 上的 onClick 事件处理

【英文标题】：onClick event handling on a Styled-component (DIV)

【发布时间】：2020-04-11 07:08:44

【问题描述】：

我想处理 DIV（在 REACT JS 中）上的 onClick 事件，它实际上是一个样式组件。但这根本不起作用。

这是我构建的伪代码：

<Styled_DIV onClick=() => props.method(props.arg)>
  <AnotherElement/>
  ...
</Styled_DIV>

我的工作正常的解决方法：

<div onClick=() => props.method(props.arg)>
 <Styled_DIV>
   <AnotherElement/>
   ...
 </Styled_DIV>
</div>

所以，我的问题是：在没有包装器 div 的情况下，在样式化组件 div 上处理 onClick 事件的官方/最佳方法是什么？

提前致谢:)

【参考方案1】：

因为您没有创建将呈现标签的 Styled_DIV 组件

只需添加此代码

const Styled_DIV = styled.div``

【讨论】：

对不起，我误会了。当然，我之前声明了一个 styled.div``，只是因为我认为它很明显，所以我没有提到它。对不起，我的错。

【参考方案2】：

您可以直接附加事件处理程序而无需包装 div。

index.js

import React from "react";
import  render  from "react-dom";
import Wrapper from "./Wrapper";

const App = () => <Wrapper onClick=() => alert("Hello")>Hello</Wrapper>;

render(<App />, document.getElementById("root"));

Wrapper.js：

import styled from "styled-components";

export default styled.button`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

代码链接：https://codesandbox.io/s/styled-components-d731y?fontsize=14&hidenavigation=1&theme=dark

您还有其他选择，例如 打字风格https://github.com/typestyle/typestyle, Styletron https://github.com/styletron/styletron 和其他可以与反应一起使用的。

【讨论】：

感谢您的大力帮助。 :) 根据本指南，我创建了一个沙盒项目，并在它的帮助下发现了我的另一个项目中的问题。在 DIV 的 CSS 设置中有一个“z-index”属性，它有一个负值，因此 div 没有被触发，因为它是身体后面的最后一层层次结构。嗯，你的答案是对的，所以我要把它设置为正确的答案。再次感谢您的帮助。 :)