Reactjs 下傳道具2個組件

Question

在我的項目中，我有一個支付表單，它有條件地呈現 2 個 Stripe 元素（PaymentRequestForm.js 和 CheckoutForm.js），我已經將道具從主表單組件 FullfillRequest.js 傳遞到 PaymentRequestForm.js，但是我正在努力傳遞CheckoutForm.js 的相同道具。 道具的 function 是為了在 Stripe 支付完成后提交表單。

使用當前設置，錯誤是 this.props.setComplete() 在 CheckoutForm.js 中未定義。

完成請求.js

  setComplete = val => {
    this.setState({
      complete: val
    });
  };

 render() {
return <PaymentRequestForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>

  <Button disabled={loading || !this.state.complete} >
 Fulfill Request
</Button>
}

PaymentRequestForm.js

class PaymentRequestForm extends React.Component {
  constructor(props) {
    super(props);

   paymentRequest.on("token", async ev => {
      const response = await fetch();
      if (response.ok) {
            this.props.setComplete(true);
      } 
    });

    this.state = {
      canMakePayment: false,
      paymentRequest,
      complete: false
    };
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );

CheckoutForm.js

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = { complete: false };
    this.submit = this.submit.bind(this);
  }
  async submit(ev) {
    let response = await fetch();
    if (response.ok) {
      this.props.setComplete(true);
       }
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
    return (
           <Button onClick={this.submit}>
            Send
          </Button>
       );
  }
}

任何幫助將不勝感激，謝謝！

Answer 1

setComplete內部PaymentRequstForm可通過this.props.setComplete而不是this.setComplete訪問（因為它來自FulfillRequest ）

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.props.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );