Javascript 如何将onclick函数添加到自定义React组件？

我是新来的。我有3个按钮作为组件导入App.js，如下所示：

import Button from "./Button";

我想向这些组件添加一个onClick函数，如下所示：

<div className="buttonsdiv">
        <Button text="+" / onClick = {...}>
//text is a parameter defined in Button.js
        <Button text="RESET" onClick = {...} />
        <Button text="-"onClick = {...} />
      </div>

//text是Button.js中定义的参数

---

有办法吗？

如果是功能组件，请尝试以下方法：

JavaScript

 const add = (e) => { }
 const sub = (e) => { }
 const reset = (e) => { }

JSX

  <div className="buttonsdiv">
    <Button text="+" onclick={add} />
    <Button text="RESET" onclick={reset} />
    <Button text="-" onclick={sub} />
  </div>

如果是没有状态的组件，则将函数传递给该组件，如下所示：

const component = (props) => {
    return { 
      <div className="buttonsdiv">
        <Button text="+" onclick={props.add} />
        <Button text="RESET" onclick={props.reset} />
        <Button text="-" onclick={props.sub} />
      </div>
    }
}

const组件=（道具）=>{
返回{
}
}

正如@brianthonpson所说，这一切都是关于

按钮的实现。想法是将
onClick
prop传递给呈现的html元素，即：

const Button = (props) => {
    return (
        <button onClick={props.onClick}/>
    );
}

const按钮=（道具）=>{
返回(
);
}
这将取决于导入的
按钮的实现。它必须使用您传递的
onClick
道具。您可以将onClick函数作为道具传递给按钮组件。让我们称之为onClickProp。然后在按钮组件中，必须有：按钮组件如下：