Question

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

我的代码：

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;儿童：元素; }'不可分配给输入'IntrinsicAttributes＆amp; IntrinsicClassAttributes，任何＆gt;＆gt;'。属性'onClick'的类型不兼容。类型'void'不能分配给'EventHandler＆gt;类型|未定义”。

我正在使用TypeScript。

Answer 1

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

我认为你真正想要做的是：

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

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

添加onclick监听器reactjs

1 个答案: