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

Posted 2023-02-22

【中文标题】React Native 中 TextInput 的 onChange 事件的 TypeScript 类型

【英文标题】：TypeScript types for TextInput's onChange event in React Native

【发布时间】：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 属性。

【参考方案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 的文档很少，你能推荐什么吗？