Question

我有一个自定义按钮，它呈现如下所示的按钮：

<button>{this.props.text}</button>

此按钮称为ButtonCustom，我要在主容器的render方法中执行的操作是：

function myFunc1{
    doSomething();
}
function myFunc2{
    doSomething();
}

<ButtonCustom text="sometext" onClick={myFunc1}></ButtonCustom>
<ButtonCustom text="sometext" onClick={myFunc2}></ButtonCustom>

但是这不起作用，因为按钮不执行功能，我如何使其起作用？

Answer 1

您还必须将 onCLick 功能作为道具传递给自定义按钮：

export const ButtonCustom = ({ onClick, text }) => (
    <button type="button" onClick={onClick}>
        {text}
    </button>
);

现在，您将可以在按钮中触发onClick事件：

<ButtonCustom text="sometext" onClick={myFunc1}></ButtonCustom>

请记住，如果您有反应中的自定义组件，则什么也没有将会自动注入渲染代码中，除非您明确将其作为道具传递

如何在React中将按钮的onClick事件设置为多个功能（取决于prop）？

1 个答案: