React Native-无法读取表单处理中未定义的属性“值”
2022-11-18
674
因此,这是我第一次使用 React Native,我正在创建一个应用程序来收集用户输入并使用表单参数呈现字符串集合,但是当我尝试填写输入字段时,我总是遇到相同的错误:
Cannot read property 'value' of undefined
关于表单处理,我应该如何解决这个问题?感谢您的关注。 这是代码:
import {React, useState} from 'react';
import {
TextInput,
View,
Text,
SafeAreaView,
StyleSheet,
Button,
ScrollView,
} from 'react-native';
const Home = () => {
const [lines, setlines] = useState([
{
text: 'This is a default string',
fontSize: 32,
color: '#000000',
},
]);
const [line, setline] = useState({
text: '',
fontSize: '',
color: '',
});
const handleSubmit = e => {
setlines({...lines, line});
};
return (
<View>
<SafeAreaView>
<Text style={styles.desc}>Insert your quote here:</Text>
<TextInput
style={styles.input}
value={line?.text}
onChangeText={e => setline({...line, [line?.text]: e.target.value})}
/>
<Text style={styles.desc}>Insert choose font size:</Text>
<TextInput
keyboardType="numeric"
style={styles.input}
value={line?.fontSize}
maxLength={3}
onChangeText={e =>
setline({...line, [line?.fontSize]: parseInt(e.target.value, 10)})
}
/>
<Text style={styles.desc}>Insert choose Hex color:</Text>
<TextInput
style={styles.input}
value={`#${line?.color}`}
maxLength={7}
onChangeText={e => setline({...line, [line?.color]: e.target.value})}
/>
<Button
onPress={handleSubmit}
title="Generate paragraph"
color="#841584"
/>
</SafeAreaView>
<ScrollView>
{lines.map((myLine, index) => (
<Text
key={index}
// eslint-disable-next-line react-native/no-inline-styles
style={{
fontSize: myLine.fontSize,
color: myLine.color,
margin: 15,
}}>
{myLine.text}
</Text>
))}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
desc: {
height: 40,
margin: 'auto',
padding: 10,
},
});
export default Home;
尝试以内联方式处理输入,但没有解决问题
2个回答
根据文档
TextInput
,
onChangeText
使用在
TextInput
中输入的
text
调用
回调函数
。
e.target
不是有效属性,
我认为您有一些
ReactJs
背景知识,因此您犯了这个错误。
Muhammad Usman
2022-11-18
我在几个地方更正了你的代码。这是 小吃
import {React, useState} from 'react';
import {
TextInput,
View,
Text,
SafeAreaView,
StyleSheet,
Button,
ScrollView,
} from 'react-native';
const Home = () => {
const [lines, setlines] = useState([
{
text: 'This is a default string',
fontSize: 32,
color: '#000000',
},
]);
const [line, setline] = useState({
text: '',
fontSize: '',
color: '',
});
const handleSubmit = e => {
setlines([...lines, line]);
};
return (
<View>
<SafeAreaView>
<Text style={styles.desc}>Insert your quote here:</Text>
<TextInput
style={styles.input}
value={line.text}
onChangeText={text => setline({...line, text })}
/>
<Text style={styles.desc}>Insert choose font size:</Text>
<TextInput
keyboardType="numeric"
style={styles.input}
value={line.fontSize}
maxLength={3}
onChangeText={fontSizeStr =>
setline({...line, fontSize: parseInt(fontSizeStr, 10)})
}
/>
<Text style={styles.desc}>Insert choose Hex color:</Text>
<TextInput
style={styles.input}
value={line.color}
maxLength={7}
onChangeText={color => setline({...line, color })}
/>
<Button
onPress={handleSubmit}
title="Generate paragraph"
color="#841584"
/>
</SafeAreaView>
<ScrollView>
{lines.map((myLine, index) => (
<Text
key={index}
// eslint-disable-next-line react-native/no-inline-styles
style={{
fontSize: myLine.fontSize,
color: '#' + myLine.color,
margin: 15,
}}>
{myLine.text}
</Text>
))}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
desc: {
height: 40,
margin: 'auto',
padding: 10,
},
});
export default Home;
Artem Golendukhin
2022-11-18