如何在另一個組件上使用來自組件的信息

Question

我正在嘗試在我的應用程序中創建一個支付系統。

我有一個付款表格（paymentForm.js），它包含付款信息（卡號、cvv、到期...）。 有什么方法可以讓我在另一個組件（checkoutPage.js）上獲取這些信息？ 你有什么建議嗎？

下面是我的 paymentForm.js：

export default class PaymentForm extends React.Component {
  state = {
    cvv: '',
    expiry: '',
    focus: '',
    name: '',
    number: '',
  };

 
  handleInputFocus = (e) => {
    this.setState({ focus: e.target.name });
  }
  
  handleInputChange = (e) => {
    const { name, value } = e.target;
    
    this.setState({ [name]: value });
  }

  
  render() {
    return (
      <View>
        <Cards id="PaymentForm"
          cvc={this.state.cvc}
          expiry={this.state.expiry}
          focused={this.state.focus}
          name={this.state.name}
          number={this.state.number}
        />
        <form style={{}}>
            <input
            type="tel"
            name="number"
            placeholder="Card Details"
            maxLength="16"
            preview='true'
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
          <br/>
            <input
            type="text"
            name="name"
            placeholder="Holder Name"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
          <br/>
            <input
            type="tel"
            name="expiry"
            placeholder="Expiration"
            maxLength="4"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
          <br/>
            <input
            type="tel"
            name="cvc"
            placeholder="CVV"
            maxLength="5"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
          <br/>
            <input
            type="tel"
            name="zipcode"
            placeholder="ZIP Code"
            maxLength="5"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />

        </form>
      </View>
    );
  }
}

Answer 1

您應該創建一個文件 CheckOut.js 並通過道具提供卡片信息。 還有另一種方法可以通過創建名為“Checkout”的 class 並在內部創建 static 方法來實現。