如何向自定义 React 组件添加 onclick 函数？

Question

我是 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>

有办法吗？

Answer 1

如果它是功能组件，试试这个：

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>
    }
}

Answer 2

正如@BrianThompson 所说，这都是关于 Button 组件的实现。这个想法是将 onClick 道具传递给呈现的 html 元素，即：

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

如何向自定义 React 组件添加 onclick 函数？

How do I add a onclick function to a custom React Component?

javascript

reactjs

react-component