[英]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.
<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.