如何獲取 TextInput 的值並添加到 React Native 中的 Flatlist

Question

我想獲取 TextInput 的值並添加到我的 flatList：這是我的 TextInput

        <TextInput style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="   Money "
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          keyboardType='numeric'
          value = 'money'
        />

這是我的按鈕，它將 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>

Answer 1

工作示例： 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,
  },
});

Answer 2

剛剛添加

 <FlatList
          data={data}
          renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
          keyExtractor={(item, index) => index.toString()}  
           />

有效