React集成Stripe时LinkAuthenticationElement的TypeScript类型错误

问题原因 #

你错误地将onChange事件的参数类型声明为React的MouseEvent，但Stripe的LinkAuthenticationElement组件的onChange事件使用的是Stripe自定义的StripeLinkAuthenticationElementChangeEvent类型，两者结构完全不同，导致类型不兼容；同时该事件对象并不包含target.value，需要从Stripe事件的特定属性中获取输入值。

解决方案 #

1. 导入正确的事件类型
   从@stripe/react-stripe-js包中导入对应事件类型：

import { StripeLinkAuthenticationElementChangeEvent } from '@stripe/react-stripe-js';

2. 修改onChange事件的类型与取值逻辑
   将事件参数类型改为StripeLinkAuthenticationElementChangeEvent，并通过event.value获取用户输入的邮箱地址：

<LinkAuthenticationElement
    id="link-authentication-element"
    onChange={(event: StripeLinkAuthenticationElementChangeEvent) => {
        setEmail(event.value);
    }}
/>

补充说明 #

Stripe表单元素的事件对象结构和React原生DOM事件不同，LinkAuthenticationElement的onChange事件会直接在event.value中返回当前输入的邮箱字符串，无需通过target属性取值。

内容的提问来源于stack exchange，提问作者geeky01adarsh