FlatList 项中的文本输入

Question

我有如下图所示的问题： 文本

正如你们所看到的，我有关于每件物品的信息：名称和库存。 现在我想通过在文本输入中输入一个数字来更新单个项目的库存但是当我在 1 个文本输入中输入 3 时，它会在所有剩余的文本输入中填充 3。 这是我的渲染项目：

renderItem = ({item}) => {
    return (
      <View style={styles.card}>
        <TouchableOpacity
          onPress={() => {
            setCreateAt(item.WarehouseProduct.createdAt);
            setNote(item.note);
            setShowModal(true);
          }}>
          <Image
            style={styles.tinyLogo}
            source={require('../assets/images/fish.jpg')}
          />
        </TouchableOpacity>
        <View
          style={{
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: 5,
            height: 75,
            width: 160,
          }}>
          <Text numberOfLines={2} style={styles.text}>
            {item.name}
          </Text>
          <Text style={styles.text}>
            {item.WarehouseProduct.stock.toString()}
          </Text>
        </View>
        <View style={styles.iconcontainer}>
          <Button title="clear" onPress={() => console.log(text)} />
        </View>
        <View
          style={{
            alignSelf: 'center',
            marginLeft: 20,
            borderWidth: 1,
            borderRadius: 10,
          }}>
          <TextInput
            style={{height: 40, width: 50}}
            keyboardType="numeric"
            onChangeText={(income) => setText(income)}
            value={text}
          />
        </View>
      </View>
    );
  };

谁能帮我解决这个问题？ 给我一个主意。 谢谢大家！

Answer 1

您放入 renderitem 的任何内容都将与您在 flatlist 中的数据一样渲染

<Flatlist 
  data={containtmultipledata}
  renderItem={
    ....
    <TextInput
        style={{height: 40, width: 50}}
        keyboardType="numeric"
        onChangeText={(income) => setText(income)}
        value={text}
      />
    ....
  }
>

但您将其分配给单个值

您可以通过项目中的索引直接更改您放入 flatlist 的数据

 <TextInput
    style={{height: 40, width: 50}}
    keyboardType="numeric"
    onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
    value={item.yourObjectName}
  />  

Answer 2

试试这个方法

const [data, setData] = useState([... flat list data here default]);

const onTextChanged = (index, value) => {
    const data = [...data]; 
    data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
    setData(data);
}

renderItem = ({item, index}) => {
    return (
      <View style={styles.card}>
        ......
        <TextInput
            ...
            onChangeText={(income) => onTextChanged(index, income)}
            value={item.availableStock || 0}
          />
      </View>
    );
};