javascript - 如何更改 Flatlist react native 中的 textInput 值？

Question

我正在处理一个产品列表，我需要修改数量，但无法使用 (+) 和 (-) 按钮修改包含数量的 inputText

感谢任何帮助..谢谢

我无法使用 stados，因为你一次只需更改一行

我想知道一种好方法，这样当我按下按钮时，每一行中的数字都会被修改，尝试使用状态，但我更改所有输入的内容

代码:

<View style={styles.containerPro}>
    <List containerStyle={{borderTopWidth: 0,
       borderBottomWidth: 0}}
       key={this.state.coins.length}
       dataSource={this.state.number}>

          <FlatList
              extraData={this.state}
              data={this.state.coins}
              keyExtractor={(item) => item.id}
              renderItem={({item}) => {
                  let num = 0;
                  this.state={
                  numb :num,
                  };

               let url = 'http://laeconomiadelsur.com/upload/' + item.foto;
               const tableData = [
                  [<View>
                       <Image 
                          source={{uri: url}} 
                          style={{
                             width: 50,
                             height: 70,
                        }}/>
                    </View>,
                   ],
                   [<View style={styles.cellIcons}>
                         <Text
                            style={styles.textCells}>
                                 {item.nombre}</Text>
                         <Text
                            style={styles.textCellsDescription}> 
                                 {item.descripcion}</Text>
                         <Text
                            style= 
                  {styles.textCellsPrecio}>${item.precio.toLocaleString()} 
                          </Text>
              </View>,
                      ],
                      [<View>
                            <Text style={styles.cantidad1}>subtotal: 
                            <Text>$300000</Text></Text>
                            <View style={styles.buttonsAdd}>
                                <TouchableOpacity
                                 style={styles.button1}
                                 navigation={this.props.navigation}
                                 onPress={()=>{
                                     num = num-1;
                                     console.log(num)
                                      }}
                                >
                                                <Text>-</Text>
                                            </TouchableOpacity>
                                            <TextInput
                                                style={styles.textSum}
                                                value={this.state.numb.toString()}
                                                placeholder="0"
                                                underlineColorAndroid={"transparent"}
                                            />
                                            <TouchableOpacity
                                                style={styles.button2}
                                                navigation={this.props.navigation}
                                                onPress={(num) => {
                                                 num = num +1;
                                                   console.log(num)
                                                }
                                                }
                                            >
                                                <Text>+</Text>
                                            </TouchableOpacity>
                                          </View>
                                        <Text style={styles.cantidad}>cantidad</Text>
                                    </View>,]
                                ];

                                return (
                                    <View style={{flex: 1}} key={item.id}>
                                        <Table style={styles.table} borderStyle={{borderWidth: 2, borderColor: 'white'}}
                                               key={item.id}>
                                               <Cols data={tableData} flexArr={[1, 2, 2]} style={styles.cells}
                                               key={item.id}/>
                                        </Table>
                                    </View>
                                );
                            }}
                        />
                    </List>
                </View>

Answer 1

为 tableData 创建一个单独的组件。并使用

shouldComponentUpdate() 

在 tableData 组件内，您仅渲染所需的组件。 关于生命周期有一本很好的读物https://reactjs.org/docs/react-component.html以及关于

shouldComponentUpdate() 

您可以从这里阅读

https://reactjs.org/docs/react-component.html#shouldcomponentupdate