React中为按钮添加点击事件监听器及回调函数实现咨询

看起来你已经搭好了支付选择模态框的基础结构，只需要给按钮绑定点击回调来触发支付方式切换就行。我帮你补全并修正了代码，直接看下面的实现：

export enum PAYMENT_METHOD {
  online,
  offline,
}

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

const AmountToPayModal = (props: Props) => {
  // 解构props，简化后续代码调用
  const { paymentMethod, togglePaymentMethod } = props;

  return (
    <Container>
      <SectionLabel>
        2.&nbsp;
        <FormattedMessage id="SE-206.Section2.Title" />
      </SectionLabel>
      <PaymentBox>
        {/* 在线支付按钮：根据选中状态切换样式，绑定点击回调 */}
        {paymentMethod === PAYMENT_METHOD.online ? (
          <PaymentButtonSelected 
            onClick={() => togglePaymentMethod(PAYMENT_METHOD.online)}
          >
            <FormattedMessage id="SE-206.Section2.OnlinePayment" />
          </PaymentButtonSelected>
        ) : (
          <PaymentButtonDeselected 
            onClick={() => togglePaymentMethod(PAYMENT_METHOD.online)}
          >
            <FormattedMessage id="SE-206.Section2.OnlinePayment" />
          </PaymentButtonDeselected>
        )}

        {/* 线下支付按钮：同理处理 */}
        {paymentMethod === PAYMENT_METHOD.offline ? (
          <PaymentButtonSelected 
            onClick={() => togglePaymentMethod(PAYMENT_METHOD.offline)}
          >
            <FormattedMessage id="SE-206.Section2.OfflinePayment" />
          </PaymentButtonSelected>
        ) : (
          <PaymentButtonDeselected 
            onClick={() => togglePaymentMethod(PAYMENT_METHOD.offline)}
          >
            <FormattedMessage id="SE-206.Section2.OfflinePayment" />
          </PaymentButtonDeselected>
        )}
      </PaymentBox>
    </Container>
  );
};

export default AmountToPayModal;

关键要点说明： #

• 绑定点击事件：用箭头函数包裹togglePaymentMethod调用，确保只有点击按钮时才触发函数（如果直接写onClick={togglePaymentMethod(xxx)}会导致组件渲染时就执行函数，这是新手常踩的坑）。
• 动态切换按钮样式：根据当前传入的paymentMethod枚举值，判断渲染选中/未选中状态的按钮组件，让用户直观看到当前选择的支付方式。
• 自定义按钮组件注意事项：如果你的PaymentButtonSelected/PaymentButtonDeselected是自定义组件，要确保它们能接收并传递onClick属性到内部的原生按钮元素上，比如自定义组件内部要这样写：

  const PaymentButtonSelected = ({ onClick, children }: { onClick?: () => void; children: React.ReactNode }) => {
    return (
      <button className="your-selected-styles" onClick={onClick}>
        {children}
      </button>
    );
  };
  

这样处理后，点击对应的支付按钮就会触发父组件传入的togglePaymentMethod函数，完成支付方式的切换啦～

内容的提问来源于stack exchange，提问作者Twitter khuong291