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

Question

I am trying to create a payment system in my application.

I have a payment form(paymentForm.js) and it contains the payment information(cardnumber, cvv, expiry...). Is there any way that I can get these information on another component(checkoutPage.js)? Do you have any advice?

Below is my 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

You should create a file CheckOut.js and give card information via props. There is also another way to do it by creating a class named 'Checkout' and creating static methods inside.