获取属性 'value' 在类型 'number'.ts(2339) 上不存在反应本机文本输入的 onChange 函数

Question

嘿，我对打字稿比较陌生。它告诉我 onChange 函数的 e.target 属性没有值属性。我只是想让它更新 userObj 的状态，允许我保存该数据，然后让我在另一个组件中查看该数据。

import React, { useState } from 'react';
import {
    View,
    Image,
    Text,
    TextInput,
    StyleSheet,
    SafeAreaView,
    KeyboardAvoidingView,
  } from 'react-native';
import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import profile from '../assets/IMG_7767.psd'
import UserStore from '../store/UserStore'

interface Props {

}


  const Profile: React.FC<Props> = () =>  {
    const { user } = UserStore 
    const [firstName, setFirstName] = useState(user[0].firstName)
    const [lastName, setLastName] = useState(user[0].lastName)
    const [location, setLocation] = useState(user[0].location)
    const [description, setDescription] = useState(user[0].description)
    const userObj = {
      firstName: firstName,
      lastName: lastName,
      location: location,
      description: description
    }

    return (
      <SafeAreaView style={styles.blue}>
        <KeyboardAvoidingView>
          <ScrollView>
            <View style={styles.center}>
                <View style={styles.head}>
                  <Text style={styles.headText}>Profile Details</Text>
                </View>
                <View style={styles.shadow}>
                  <Image source={profile} style={styles.profileImage}/>
                </View>
                <View style={styles.formField}>
                  <Text style={styles.formText}>First Name</Text>
                  <TextInput 
                  style={styles.textInput} 
                  value={firstName} 
                  onChange={(e) => setFirstName(e.currentTarget)}
                  />
                </View>
                <View style={styles.formField}>
                  <Text style={styles.formText}>Last Name</Text>
                  <TextInput 
                  style={styles.textInput}
                  value={lastName} 
                  onChange={(e) => setLastName(e.target.value)}
                  />
                </View>
                <View style={styles.formField}>
                  <Text style={styles.formText}>Location</Text>
                  <TextInput 
                  style={styles.textInput}
                  value={location} 
                  onChange={(e) => setLocation(e.target.value)}
                  />
                </View>
                <View style={styles.formField}>
                  <Text style={styles.formText}>Description</Text>
                  <TextInput 
                  style={styles.textArea}
                  value={description} 
                  onChange={(e) => setDescription(e.target.value)}
                  />
                </View>
                <TouchableOpacity style={styles.mainButton} onPress={()=> user[0].update(userObj)}>
                  <Text style={styles.mainButtonText}>Save</Text>
                </TouchableOpacity>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </SafeAreaView>
    )
}

我查看了有关堆栈溢出的其他帖子，但找不到与此特定问题相关的任何帖子。我在网上找到的其他解决方案据说使用 getElementById().value 但我认为会有更简单的方法来构建 react-native。我还看到了一个解决方案，上面写的是 e.currentTarget 而不是 e.target 我假设这与我目前拥有的结果相同，因为它与 onChange 属性相关，并且一次只有一个文本输入发生变化。第二种解决方案也不适合我

Answer 1

你为什么不这样使用onChangeText：

onChangeText={(text)=> setFirstName(text)}

在此处查看文档 https://reactnative.dev/docs/textinput

获取属性 'value' 在类型 'number'.ts(2339) 上不存在反应本机文本输入的 onChange 函数

getting Property 'value' does not exist on type 'number'.ts(2339) on onChange function of react native text input

typescript

reactjs

react-native

mobx-state-tree

获取 属性 'value' 在类型 'number'.ts(2339) 上不存在反应本机文本输入的 onChange 函数

getting Property 'value' does not exist on type 'number'.ts(2339) on onChange function of react native text input

typescript

reactjs

react-native

mobx-state-tree

获取属性 'value' 在类型 'number'.ts(2339) 上不存在反应本机文本输入的 onChange 函数