时间戳

首页 > 解决方案 > 使用带有样式组件的自定义组件时无法触发函数 onClick

javascript - 使用带有样式组件的自定义组件时无法触发函数 onClick

问题描述

我正在尝试样式化组件，并且发现我们可以轻松定义自定义组件，例如：

const myButton = ({className, children}) => {
    <button className={className}>{children}</button>
}

但是，当我在呈现的 HTML 中使用它时，我似乎无法从onClick附加的处理程序中触发事件......

<MyButton onClick={doSomething}>My custom button element</MyButton>

我还尝试附加onClick到定义的常量，包括该文件中的函数：

const myButton = ({className, children}) => {
    <button className={className} onClick="{doSomething}">{children}</button>
}

但似乎两者都不起作用......

标签： javascripthtmlnode.jsreactjsecmascript-6

解决方案

您没有在组件中传递对 onClick 函数的任何引用。你应该有这样的东西：

const myButton = ({className, children, onClick}) => {
    <button className={className} onClick={onClick}>{children}</button>
}

在附加 onClick 方法的示例中，您附加了字符串而不是函数。如果上述方法不起作用，请尝试以下操作：

const myButton = ({className, children}) => {
    <button className={className} onClick={() => alert("click!")}>{children}</button>
}

推荐阅读