1

我有一个功能组件，它是一个屏幕，我需要处理一些状态。我不想重构我的代码以使其成为类组件，我想使用钩子。我在屏幕中有一个组件，它呈现产品描述、数量和用户输入数量框的平面列表（来自 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>
    );
};
4

1 回答 1

1

免责声明：我没有使用过本机反应，但我通常做的是命名，列表中项目的 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
  )
于 2020-06-01T18:27:06.237 回答