有没有办法将 onClick 事件添加到自定义组件

Question

我有两种按钮，一个普通的 html 按钮和另一个自定义按钮。我只能在普通按钮上使用 onClick，但另一个不起作用。我有的自定义按钮：

import React from 'react'
import  './custom-button.styles.scss'

function CustomButton({children,isGoogleSignIn,...buttonProps}) {
    return (
        <button className={`${isGoogleSignIn? 'google-sign-in':''} custom-button`}>
            {children}
        </button>
    )
}

export default CustomButton

我使用它的代码：

<button onClick={() => alert("Normal button")}>Click me</button>
<CustomButton onClick={() => alert("Custom button")}>Click me</CustomButton>

Answer 1

onClick不会在您的CustomButton组件上触发，因为底层<button>元素没有获取onClick提供给它的处理程序。您需要将其传递给自定义按钮中的buttonProps底层元素：<button>

function CustomButton({className,...buttonProps}) {
    return (
        <button className={className} {...buttonProps}>
            {children}
        </button>
    )
}

{...buttonProps}在元素上使用实质上会将提供给组件的<button>所有剩余 props 传递给元素。因此，如果您使用这些道具调用：CustomButton<button>CustomButton

<CustomButton className="signin" onClick={handleClick} onChange={handleChange}>
  Click me
</CustomButton>

它将有效地呈现按钮，如下所示：

<button className="signin" onClick={handleClick} onChange={handleChange}>
  Click me
</button>

Answer 2

将其余部分传递给props，button它将具有onClick：

    <button className={`${isGoogleSignIn? 'google-sign-in':''} custom-button`} {...buttonProps}>