Question

我创建了一个可重用的组件来创建表格。它由文本标签和文本输入组成，如下所示：

const LabelTextInput = ( { name } ) => {
    const [value, onChangeText] = React.useState();

    return (
        <View>
            <Text>{name}</Text>
            < TextInput
            onChangeText = {
                text => onChangeText(text)
            }
            value = {
                value
            }
            />
        </View>
    );
}

然后我将其用于实际形式：

const AddPlantScreen = () => {
    const [selectedValue, setSelectedValue] = useState("medium");
    const inputNames = [{
        name: 'Name'
    }, {
        name: 'Botanical name'
    }, {
        name: 'Water'
    }, {
        name: 'Soil'
    }, {
        name: 'Repotting'
    }]

    const verifyInput = () => {
        console.log()
    }
    
    return (
        <View>
            <FlatList
                keyExtractor = {item => item.name}
                data = {inputNames}
                renderItem = {({item}) => {
                    return <LabelTextInput name ={item.name}/>
                }}
            />
        <Text>Size</Text>
        <Picker
            selectedValue={selectedValue}
            onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
            >
            <Picker.Item label="small" value="small" />
            <Picker.Item label="medium" value="medium" />
            <Picker.Item label="large" value="large" />
        </Picker>
            < Button onPress = {
                () => verifyInput()
            }
            title = 'Confirm'
            />
        </View>
    );
};

现在，我想验证输入（以排除空值和重复的名称），但是我不知道如何访问嵌套的TextInput的值。理想情况下，我想遍历verifyInput()中的内容，将它们分配给一个对象并将其保存到数据库。我看到了一种解决方案，即修改inputNames，使它们具有value，这些变量将在renderItem中分配，但是这对我来说似乎很麻烦，我正在寻找不同的选项。

访问嵌套在FlatList中的TextInput

0 个答案: