添加 onclick 监听器 reactjs答案

【问题标题】：Add onclick listener reactjs添加 onclick 监听器 reactjs
【发布时间】：2018-08-30 06:15:58
【问题描述】：

我想在点击按钮时添加回调函数。

我的代码：

export enum PAYMENT_METHOD {
  online,
  offline,
}

interface Props {
  paymentMethod: PAYMENT_METHOD;
  togglePaymentMethod: (paymentMethod: PAYMENT_METHOD) => void;
}

const AmountToPayModal = (props: Props) => (
  <Container>
    <SectionLabel>
  2.&nbsp;
  <FormattedMessage id="SE-206.Section2.Title" />
</SectionLabel>
<PaymentBox>
      <PaymentButtonDeselected >
        <FormattedMessage id="SE-206.Section2.OnlinePayment" />
      </PaymentButtonDeselected>
      <PaymentButtonSelected onClick={props.togglePaymentMethod(PAYMENT_METHOD.online)}>
        <FormattedMessage id="SE-206.Section2.OfflinePayment" />
      </PaymentButtonSelected>
    </div>
</PaymentBox>
</Container>
    );

[ts] 类型 '{ onClick: void;孩子：元素； }' 不可分配给输入'内在属性& IntrinsicClassAttributes，任何>>'。属性“onClick”的类型不兼容。类型 'void' 不可分配给类型 'EventHandler> |未定义'。

我正在使用 TypeScript。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

在您的onClick 处理程序中，您不是传递函数，而是调用函数。 在调用 AmountToPayModal 时（在渲染期间）调用您的函数，而不是在用户单击时。并且该函数返回 void，因此 TypeScript 推断（正确）您是将 void 分配给事件处理程序。

我认为你真正想做的是：

<PaymentButtonSelected onClick={() => props.togglePaymentMethod(PAYMENT_METHOD.online)}>

现在您正在为处理程序分配一个函数，当用户单击该元素时，您的函数将被正确调用

【讨论】：

感谢@Oscar Paz
Lambda 在 JSX 属性中被禁止使用，因为它们会影响渲染性能