React Native将不同的用户输入放在一个对象中

Question

我正试图用React Native制作一个简单的问答测验。也就是说，我想把问题和答案都存储在一个对象中。

目前，我遇到了以下代码块的问题：

import React, { useState, useEffect } from 'react'
import {
StyleSheet,
Button,
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native'

const Test = () => {
const[card, setValues] = useState({
title: '',
question: '',
answer: ''
})
const updateField = e => {
setValues({
...card,
[e.target.name]: e.target.value
});
};
<TextInput
placeholder='Kartentitel eingeben..'
name = "title"
value={card.title}
onChangeText={updateField}>
</TextInput>
<TextInput
placeholder='Fragestellung eingeben..'
name = "question"
value={card.question}
onChangeText={updateField}>
</TextInput>
<TextInput
placeholder='Antwortmöglichkeit eingeben..'
name = "answer"
value={card.answer}
onChangeText={updateField}>
</TextInput>
}
export default Test;

但是我得到以下错误ERROR TypeError:undefined不是对象(正在计算"e.target.value"(错误

我从react(非react原生(帖子和教程中得到了这个想法。基本上，它试图做的是获取每个相应的UserInput值，并将其放入对象目标中(这就是updateField函数应该做的(

任何帮助都将非常感谢

Richard

Answer 1

发生错误是因为e不是HTMLInputChange事件，我认为onChangeText函数需要一个只有字符串参数的函数。

您可以将updateField函数封装为另一个需要类似名称的函数：

const updateField = (name) => (value) =>{
setValues({
...card,
[name]: value
});
}

像这个一样使用

<TextInput ... onChangeText={updateField("title")} />

这应该是可行的，尽管我建议使用类似Formik的东西来进行表单验证和处理值更改。

Answer 2

onChangeText和onChange的区别在于，onChangeText上的参数只是实际值，而onChange上的参数是事件本身。所以尝试用onChange替换onChangeText。

<TextInput
placeholder='Antwortmöglichkeit eingeben..'
name = "answer"
value={card.answer}
onChange={updateField}>
</TextInput>