如何使用useState钩子来处理React Native中FlatList中的多个动态文本输入

Question

---

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

网上有很多使用钩子存储一个数据集而不是多个数据集的例子，由于我不知道一段时间内会有多少"产品"，我无法为它们创建不同的useState。我是否最好为所有输入框设置1个useState并存储在一个数组中？

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>
</View>
);
};

描述组件

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} />

然后有一个调用来使用state，但使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
)

Answer 2

这是React和React Native的常见答案

您可以使用"；useState"；hook为每个输入存储具有多个属性的单个对象。我认为下面的例子对你的情况也有帮助。

// State
const [data, setData] = useState({
name: '',
email ''
})
// Elements
<input type="text" placeholder="Name" onChange={(e) => 
setData({ ...data, name: e.target.value })} />
<input type="text" placeholder="Email" onChange={(e) => 
setData({ ...data, email: e.target.value })} />

在这里我用了这个"；CCD_ 1"；代码行的和平，通过用新值替换特定的键来更新现有的状态对象。