React Stripe JS и React Stepper - PullRequest
Новая
       9

React Stripe JS и React Stepper

0 голосов
/ 12 марта 2020

Привет, ребята, я довольно новичок в React js, и я только начал использовать response-stripe- js. У меня вопрос: можно ли оставить значение в элементах Stepper в React Stepper после изменения страницы? Ваши ответы очень ценятся.

Образец конструкции Stepper с элементами Stipe 

class CheckoutForm extends React.Component {
handleSubmit = (ev) => {
    ev.preventDefault();
    this.props.stripe
        .createPaymentMethod('card')
        .then((payload) => {
            console.log('[pm]', payload)
    });

    this.props.stripe
        .createToken({type: 'card', name: 'Jenny Rosen'})
        .then((payload) => {
            console.log(payload)
    });

    this.props.stripe.createSource({
    type: 'card',
    owner: {
        name: 'Jenny Rosen',
    },
    });
};

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

//CardSection.js
class CardSection extends React.Component {
 render() {
    return (
        <>
            <label>
            Name
            <input name="name" type="text" placeholder="Jane Doe" required />
            </label>
            <label>
                Card details

                <CardNumberElement style={{base: {fontSize: '18px'}}}/>
                <CardExpiryElement style={{base: {fontSize: '18px'}}} />
                <CardCVCElement style={{base: {fontSize: '18px'}}} />
            </label>
        </>
    );
  }
 }

1 Ответ

0 голосов
/ 12 марта 2020

Состояние является локальным для вашего компонента. Независимо от того, какие логики c у вас в next (), кажется, выборочно рендерится в зависимости от того, какого шага достиг пользователь.

Это проблема, потому что когда пользователь переходит на следующий шаг, ваши значения состояния отключаются и уничтожается и, следовательно, теряет свое состояние.

Решение состоит в том, чтобы сохранить значения в качестве подпорки для вашего дочернего компонента и переместить handleChange вверх в родительский компонент, а также использовать его в качестве подпорки для дочернего компонента. Сохраните значения в состоянии родительского компонента, который не размонтируется при изменении шага. В родительском компоненте поместите событие handleChange, чтобы оно сохранялось в родительском состоянии.

Теперь, когда пользователь переходит на следующий экран, вы благополучно сохранили выбранные значения в родительском состоянии.

...