Question

我有一个功能组件，它是一个屏幕，我需要处理一些状态。我不想重构我的代码使其成为类组件，而我想使用钩子。我在屏幕内有一个组件，用于呈现产品描述，数量和用户输入数量的框的平面列表（来自JSON）。目前，我所有输入数量的状态都捆绑在一起，因此当我在1个框中输入数字时，所有框中都显示相同的数字。如何使用钩子分隔和存储输入状态？

在线上有很多示例，这些示例使用钩子存储1个数据，但不能存储多个数据，而且由于我不知道会有多少“产品”，所以我无法为它们创建不同的useState。我最好对所有输入框使用1个useState并将其存储在数组中吗？

        import React, { useState } from 'react';
        import { Text, View, StyleSheet, SafeAreaView, FlatList } from 'react-native';

        function InstallScreen ({navigation, route}) {

            // State for the number installed component
            const [quantityInstalled, setQuantityInstalled] = useState([])

            const { item } = route.params;

    // pulling just the product arrays from the job data and storing separately
            const productData = item.products;

            return (

       <View style={styles.containerNine}>
                                            <View style={styles.descriptionBoxContainer}>
                                                <View style={styles.descriptionBox}>

                                                        <FlatList
                                                            data={ productData }
                                                            keyExtractor={item => item.id.toString()}
                                                            renderItem={({ item }) =>
                                                                <DescriptionBox
                                                                    productDescription={item.description}
                                                                    dueQuantity={item.quantity}



                                                                    value={quantityInstalled}
                                                                    onChangeText={value => setQuantityInstalled(value)}


                                                                />
                                                            }
                                                        />  

                                                        <Text>Number installed is {quantityInstalled } </Text>


                                                </View>
                                            </View>
    );
};

描述组件

import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';

const DescriptionBox = (props) => {
    return (
        <View style={styles.productsAllContainer}>

            <View style={styles.descriptionBoxStyle}>
                <Text style={styles.textStyle}>
                    {props.productDescription}
                </Text>
            </View>

            <View style={styles.qtyBoxStyle}>
                <Text style={styles.qtyTextStyle}>
                    {props.dueQuantity}
                </Text>
            </View>

            <View>
                    <TextInput
                    style={styles.installedBoxStyle}
                        textAlign='center'
                        fontSize='18'
                        fontWeight='bold'
                        autoCapitalize="none"
                        autoCorrect={false}
                        keyboardType={'numeric'}
                        maxLength={5}
                        value={props.value}
                        onChangeText={props.onChangeText}
                    />
            </View>

        </View>
    );
};

Answer 1

免责声明：我没有使用react native，但是我通常要做的是命名，列表中项目的ID，然后在更改状态时将该名称传递给

<input name={id} onChange={onChange} />

然后只有一个使用状态的调用，但使on change函数从事件处理程序中获取名称

  const [productQuantity, setProductQuantity] = React.useState('')
  const onChange = (e) => {
    const {name, value} = e.target;
    setProductQuantity({...productQuantity,[name]:value})
  };

但是对于您的特定情况，您可能还需要一个函数来从状态获取安装数量，也可以将函数传递给孩子以按照

  const getProductQuantity = (id) => (
    productQuantity[id] && productQuantity[id] || 0
  )

如何使用useState钩子来处理来自React Native中FlatList的动态多个textInput？

1 个答案: