[英]How to get the value ot TextInput and add to Flatlist in React Native
I want to get the value of TextInput and add to my flatList: here is my TextInput我想获取 TextInput 的值并添加到我的 flatList:这是我的 TextInput
<TextInput style={styles.input}
underlineColorAndroid="transparent"
placeholder=" Money "
placeholderTextColor="#9a73ef"
autoCapitalize="none"
keyboardType='numeric'
value = 'money'
/>
This is my Button that will add the value of TextInput into my Flatlist这是我的按钮,它将 TextInput 的值添加到我的平面列表中
<Button
title="Add me"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
<FlatList
data={DATA}
renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)} />
</View>
Working Example: Expo Snack工作示例: Expo 小吃
import React, { useState } from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
Button,
FlatList,
} from 'react-native';
import Constants from 'expo-constants';
export default function App() {
const [data, setData] = useState([{ name: 'ketan' }]);
const [name, setName] = useState('');
return (
<View style={styles.container}>
<TextInput
style={{ backgroundColor: 'white', padding: 10, marginTop: 10 }}
onChangeText={(name) => setName(name)}
placeholder={'enter name'}
value={name}
/>
<Button
title={'add me'}
onPress={() => {
if (name) setData([...data, { name: name }]);
console.log('hi');
}}
/>
<FlatList
keyExtractor={(item) => item}
data={data}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
just added刚刚添加
<FlatList
data={data}
renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
keyExtractor={(item, index) => index.toString()}
/>
it worked有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.