FlatList项目中的TextInput

问题描述

我有一个类似下图的问题： Text

您可以看到我在每个项目上都有信息：名称和库存。现在，我想通过在文本输入中键入数字来更新单个项目的库存，但是当我在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>
    );
  };

有人可以帮我解决这个问题吗？请给我一个主意。谢谢大家！

解决方法

您放置在renderitem中的任何内容都将与平面列表中的数据一样呈现

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

但是您将其分配为单个值

您可以根据项目中的索引直接更改放入平面清单的数据

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

,

尝试这种方式

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