javascript - 在 onBeforeInput 处理程序中 react : how to use event. 数据而没有 TypeScript 错误

Question

所以 onBeforeInput 收到的事件处理程序的类型为 React.FormEvent<HTMLInputElement> .这是一个非常通用的类型，不包括 data属性(property)。
据我所知 onBeforeInput 的事件接收(nativeEvent 在 Firefox 中为 KeyboardEvent，在 Chrome 中为 TextEvent)将具有 data属性(property)。
编写使用 event.data 的处理程序的正确方法是什么？没有 TypeScript 提示 Property 'data' does not exist on type 'FormEvent<HTMLInputElement>' ?

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

Answer 1

我只是检查类型definition发现了这个，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); 
}} />