繁体   English   中英

添加onclick监听器reactjs

[英]Add onclick listener reactjs

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

我的代码:

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&IntrinsicClassAttributes,any >>”类型。 属性“ onClick”的类型不兼容。 类型'void'不能分配给'EventHandler> |类型。 未定义”。

我正在使用TypeScript。

在您的onClick处理程序中,您没有传递函数,而是传递了对函数的调用。 调用AmountToPayModal时(在渲染过程中),而不是在用户单击时,将调用您的函数 该函数返回void ,因此TypeScript正确地推断出您正在将void分配给事件处理程序。

我认为您真正想要做的是:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM