如何通过单击按钮添加另一个 TextInput？

Question

我是 React Native 的初学者，正在努力通过单击按钮然后将这些组件放在平面列表中来添加另一个 TextInput（作为组件）

这是我的主屏幕

import React, { useState } from 'react'
import {
    View,
    Text,
    Button,
    FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'

const AddInputDemo = props => {
    const addInput = () => {
        //....
    }
    return(
        <View style={{flex: 1}}>
            <Button
                title='Add a location'
                onPress={addInput}
            />
            <FlatList
                keyExtractor={(item, index) => item.id}
                data={} // I really can't figure it out what to put in this prop
                renderItem={itemData => (
                    <InputDemo />
                )}
            />
        </View>
    )
}

export default AddInputDemo;

这是我的 InputDemo 组件：

import * as React from 'react'
import {
    View,
    Text,
    TextInput,
    Button
} from 'react-native'

const InputDemo = props => {
    return(
        <View>
            <TextInput
                placeholder='Search'
            />
        </View>
    )
}

export default InputDemo;

Answer 1

FlatList的data prop 是您希望FlatList使用的项目数组，而renderItem是为您提供的data prop 中的每个项目调用的函数。

对于您的问题，您需要使用 state 和 setState 来跟踪要在 FlatList 中显示的输入数量

import { useState } from "react";
const AddInputDemo = props => {
    const [numberOfInputs, setNumberOfInputs] = useState([1]) // initial count is 1, so one input will be displayed

    const addInput = () => {
      setNumberOfInputs([...numberOfInputs, 1]);
    }
    return(
        <View style={{flex: 1}}>
            <Button
                title='Add a location'
                onPress={addInput}
            />
            <FlatList
                keyExtractor={(item, index) => item.id}
                data={numberOfInputs}
                renderItem={itemData => (
// it will be called as many times u increase the numberOfInputs array
                    <InputDemo />
                )}
            />
        </View>
    )
}

Answer 2

React Native Flatlist 采用data数组道具。 它代表一个数组，其中每个元素描述一个列表项，数组元素可以是一个对象，该对象可以包含任意数量的属性来描述列表元素。

Flatlist 采用名为renderItem的第二个道具，这是一个使用数据元素呈现列表项的函数。

正如您将在下面的示例中看到的那样，我们将使用名为placeholder的单个属性配置我们的数据数组元素，我们将其作为 prop 注入在renderItem中呈现的组件。

const AddInputDemo = () => {
    // define your list with a setter in the state
    const [list, setList] = useState([]);

    const addInput = () => {
        // add a new object to the list and set it to the state
        setList([...list, { placeholder: 'something' }]);
    };

    return (
        <View style={ { flex: 1 } }>
            <Button title="Add a location" onPress={ addInput } />
            {/* add your list to the data prop and setup the */}
            {/* renderItem prop with the list item */}
            <FlatList keyExtractor={ ({ id }) => (id) } data={ list }
                      renderItem={ ({ item }) => (<InputDemo item={ item } />) } />
        </View>
    );
};

const InputDemo = (props) => {
    return (
        <View>
            {/* use the configured data from the props */}
            <TextInput placeholder={ props.item.placeholder } />
        </View>
    );
};