如何还原默认事件侦听器以提交表单

Question

我有一个订单，用户可以在提交订单之前更改其卡信息。

如果他们想使用新卡，则可以单击按钮以将带区付款元素安装到表单，然后可以输入新卡信息。

表单提交有一个async event.preventDefault(); 为了从条带中获取令牌，以便可以在提交表单之前将其生成并附加到隐藏字段中，以便可以将令牌与条带gem一起用于向控制器中的用户收费。

  changeCardButton.addEventListener('click', e => {
    e.preventDefault();
    mountCardField();
  });

  function mountCardField() {
  form.addEventListener('submit', async event => {
    event.preventDefault();
    const { token, error } = await stripe.createToken(card);
    if (error) {
    } else {
      stripeTokenHandler(token);
      form.submit();
    }
  });
}

如果用户改变主意并想返回保存的卡信息，则可以在提交订单之前单击“后退”按钮：

  cardContainerBackButton.addEventListener('click', e => {
    e.preventDefault();
    unmountCardFieldAndShowLastUsedCard();
  });

  function unmountCardFieldAndShowLastUsedCard() {
    card.unmount();
    form.removeEventListener('submit', event, false);
    changeCardContainer.style.display = 'none';
    cardInfo.style.display = 'block';
  }

但是， form.removeEventListener('submit', event); 无法还原表单的默认行为并通过提交而不会生成条纹令牌的方式来提交表单。

Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.

如何从表单中删除异步事件提交侦听器并恢复表单的默认提交行为？

Answer 1

我认为问题出在您的removeEventListener调用中。 第二个参数必须是您要删除的原始侦听器，此刻您正在传递似乎未定义的event 。

要解决此问题，请将侦听器定义为自己的函数，并在add和remove使用它：

const listener = async event => {
  event.preventDefault();
  const { token, error } = await stripe.createToken(card);
  if (error) {
  } else {
    stripeTokenHandler(token);
    form.submit();
  }
}

function mountCardField() {
  form.addEventListener('submit', listener);
}

function unmountCardFieldAndShowLastUsedCard() {
  // ...
  form.removeEventListener('submit', listener);
}