React Native 中 TextInput 的 onChange 事件的 TypeScript 类型答案

【问题标题】：TypeScript types for TextInput's onChange event in React NativeReact Native 中 TextInput 的 onChange 事件的 TypeScript 类型
【发布时间】：2020-06-18 05:14:55
【问题描述】：

我有一个使用 TypeScript 的 React Native Expo 项目。如何为TextInput 的onChange 事件添加类型？

    <TextInput
      keyboardType="numeric"
      value={`${value}`}
      onChange={(e: React.FormEvent<HTMLInputElement>): void => {
        set({ value: e.target.value });
      }}
    />

我收到此错误：

TS2339：类型“EventTarget”上不存在属性“值”

【问题讨论】：

这能回答你的问题吗？ Typescript input onchange event.target.value
@JaredSmith 不，我仍然遇到错误。 React Native 是否使用与 React 相同的类型？
在某种程度上不：DOM 与 iOS/Android 构建块的子集 React-native 使用是不同的，但如果类型是那个，我会有点惊讶> 不同。我认为您的问题（正如链接上的答案所指出的那样）是目标与 currentTarget 的区别。对于目标，编译器必须假设最坏的情况，并且并非所有 DOM 元素（或本机视图）都会具有 value 属性。

标签： typescript react-native expo

【解决方案1】：

事件的类型是NativeSyntheticEvent<TextInputChangeEventData>

您可以从“react-native”导入这两个。

它有一个名为 nativeEvent 的道具，还有文字。

import { View, TextInput, NativeSyntheticEvent, TextInputChangeEventData } from "react-native";

...

const onChange = (e: NativeSyntheticEvent<TextInputChangeEventData>): void => {
    const value = e.nativeEvent.text;
    doStuff(value);
  }
  
...

<TextInput onChange={onChange} />

【讨论】：

太棒了！我感觉关于 React Native with Typescript 的文档很少，你能推荐什么吗？