React：如何在没有 TypeScript 错误的情况下在 onBeforeInput 处理程序中使用 event.data

Question

因此，onBeforeInput处理程序接收到的事件类型为React.FormEvent<HTMLInputElement>。这是一个相当普遍的类型，不包括data属性。

据我所知，onBeforeInput接收到的事件（nativeEventsKeyboardEvent在 Firefox 中，TextEvent在 Chrome 中）将具有该data属性。

编写一个处理程序的正确方法是什么，event.data而不用 TypeScript 抱怨Property 'data' does not exist on type 'FormEvent<HTMLInputElement>'？

onBeforeInput={(e) => {
  handleInput(e.data);
  e.preventDefault();
}}

Answer 1

我只是检查类型定义并发现了这个，

的类型e是FormEvent<HTMLInputElement>,

那么FormEvent被定义为，

interface FormEvent<T = Element> extends SyntheticEvent<T> {
}

是 的FormEvent扩展SyntheticEvent，定义为，

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {} 

当我检查 的定义时BaseSyntheticEvent，我发现了这一点，

interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
}  

这里我们没有属性调用data。然后我只看到有一个类型调用，CompositionEvent它扩展了SyntheticEvent。

interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
    data: string;
}

并且它有领域data；

所以我做了，

<input type="text" onBeforeInput={(e:SyntheticEvent) => { 
        let event = e as CompositionEvent; 
        console.log(event.data); 
}} /> 

或者，

interface CustomEvent extends SyntheticEvent {
  data ?: string
}
<input type="text" onBeforeInput={(event:CustomEvent) => { 
        console.log(event.data); 
}} />