html - 样式化组件 (DIV) 上的 onClick 事件处理
问题描述
我想在 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 事件的官方/最佳方法是什么?
提前致谢 :)
解决方案
您可以直接附加事件处理程序而无需包装 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"));
包装器.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
您还可以使用其他选项,例如 typestyle https://github.com/typestyle/typestyle、 Styletron https://github.com/styletron/styletron以及其他可以与 react 一起使用的选项。
推荐阅读
- ios - Unity 2019.3.7f1 ios 未构建
- c++ - 为什么 C++20 不支持“void f(Concept const auto&)”?
- java - 在 Spring Boot 中使用 hibernate-types-52 时如何禁用 Hypersistence 横幅?
- python-3.x - python(熊猫)中的嵌套Excel数据透视表
- r - R:错误:自动绘图不支持数字类型的对象
- javascript - React JS 状态值不会在下一个函数调用中立即更新
- python - 具有内部类的计数器实例方法
- javascript - User.find 不是函数,编译后无法覆盖“用户”模型
- ios - 如何在 swift 5 中使用 Freddy 框架发送字典的请求参数?
- pandas - 将时间戳转换为累积秒数的数组