javascript - 如何在另一个组件上使用来自组件的信息

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>
    );
  }
}

标签： javascriptreactjs

Answer 1

您应该创建一个文件 CheckOut.js 并通过道具提供卡片信息。还有另一种方法是创建一个名为“Checkout”的类并在其中创建静态方法。