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

我正在试验，并且已经看到我们可以轻松定义自定义组件，例如：

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

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

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

---

但这两种方法似乎都不起作用…

不确定这是否正确，但我认为您正在尝试调用doSomething函数，对吗

如果是这样，试试这个

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

或者使用箭头函数

<MyButton onClick={() => this.doSomething}>My custom button element</MyButton>

或者如果你作为道具传球，请使用

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

---

您没有在组件中传递对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>
}

---

太棒了，谢谢！基本页面没有很清楚地说明这一点。我的错。我也刚刚意识到，如果我想在标签上添加一个ID，我必须这样做！

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