Question

我已经使用reactjs条纹卡部分和在卡部分中创建了，添加卡元素，并在结帐表单中呈现它，并在结帐表单中，还存在付款按钮，但是我想禁用付款按钮，除非响应来自后端？这是我的代码：-

class CheckoutForm extends React.Component {
  handleCallback = status => {
    if (status === "success") {
      message.success("Payment is successfull");
      this.props.history.push("/main");
    } else {
      message.error("Some error occoured");
    }
  };

  handleSubmit = ev => {
    ev.preventDefault();
    const { userDetails, user, tempPassDate } = this.props;
    const { paymentId } = this.props;
    this.props.stripe
      .createPaymentMethod("card", { billing_details: { name: "Jenny Rosen" } })
      .then(({ paymentMethod }) => {
        console.log("Received Stripe PaymentMethod:", paymentMethod.id);
        this.props.payment(
          {
            paymentMethodId: paymentMethod.id,
            paymentId: paymentId,

          },

        );
      })
      .catch(err => console.log(err));
  };
  render() {

    return (
          <form onSubmit={this.handleSubmit}>
            <CardSection/>
            <button>
              Pay
            </button>
          </form>             
    );
  }
}

Answer 1

以如下状态进行管理：

class CheckoutForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      disableBtn: false;
    }
  }
  handleCallback = status => {
    if (status === "success") {
      message.success("Payment is successfull");
      this.props.history.push("/main");
    } else {
      message.error("Some error occoured");
    }
  };

  handleSubmit = ev => {
    ev.preventDefault();
    this.setState({ disableBtn: true });
    const { userDetails, user, tempPassDate } = this.props;
    const { paymentId } = this.props;
    this.props.stripe
      .createPaymentMethod("card", { billing_details: { name: "Jenny Rosen" } })
      .then(({ paymentMethod }) => {
        console.log("Received Stripe PaymentMethod:", paymentMethod.id);
        this.props.payment(
          {
            paymentMethodId: paymentMethod.id,
            paymentId: paymentId,

          },

        );
        this.setState({ disableBtn: false });
      })
      .catch(err => console.log(err));
  };
  render() {

    return (
          <form onSubmit={this.handleSubmit}>
            <CardSection/>
            <button disabled={this.state.disableBtn}>
              Pay
            </button>
          </form>             
    );
  }
}

在使用reactjs处理付款时，如何禁用分期付款按钮？

1 个答案: