javascript - 如何从具有多个对象的平面列表中设置和获取不同的状态和输入

Question

好的，我得到了包含在平面列表中的平面列表，并且内部的平面列表包含下拉列表、输入和按钮，我需要捕获从它们那里获取的数据，当然还可以根据内容保存新数据我选择、输入或单击，我不完全确定如何执行此操作，这是 flatlist 的代码

                <FlatList
              extraData = {this.state}
              data = {this.state.dataSource}
              renderItem = {({item, index}) => {
                return (
                  <View style={{marginTop: hp('2%')}}>
                    <TouchableOpacity style={{
                      alignSelf: 'center',
                      width: wp('95.7%'),
                      height: hp('10%'),
                      backgroundColor: "#ffffff",
                    }} onPress={() => this.toggleExpanded()}>
                      <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View style={{flexDirection: 'column', justifyContent: 'center'}}>
                          <Text numberOfLines={2} ellipsizeMode="tail" style={{
                            marginLeft: wp('5%'),
                            width: wp('55%'),//wp('38.2%'), //151
                            //height: hp('2%'), //19
                            fontSize: rfv(16),
                            fontWeight: "500",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#707070"
                          }}>{item.Title}</Text>
                          <Text style={{
                            marginLeft: wp('5%'),
                            fontSize: rfv(14),
                            fontWeight: "normal",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#c4c4c4"
                          }}>{`ID ${item.Id} - ${item.Cliente}`}</Text>
                        {
                          !item.IsFavorite ?
                          <Text style={{
                            marginLeft: wp('5%'),
                            fontSize: rfv(14),
                            fontWeight: "normal",
                            fontStyle: "italic",
                            textAlign: "left",
                            color: "#c4c4c4"
                          }}>No favorito</Text>
                          : null
                        }
                        </View>
                        <View style={{flexDirection: 'column', justifyContent: 'center'}}>
                          <View style={{flexDirection: 'row', marginRight: wp('3.4%')}}>
                            <Text style={{
                              fontSize: rfv(18),
                              fontWeight: "300",
                              fontStyle: "normal",
                              textAlign: "right",
                              color: "#707070"}}>{`${0}h`}</Text>
                            <Image style={{marginTop: hp('1%'), marginLeft: wp('3.7%')}} source={this.state.isCollapsed ? Images.expandible : Images.collapsible}/>
                          </View>
                        </View>
                      </View>
                    </TouchableOpacity>
                    <Collapsible style={{
                      alignSelf: 'center',
                      width: wp('95.7%'),
                      backgroundColor: "#ffffff",}} collapsed={this.state.isCollapsed}>

                    <FlatList
                      //extraData = {this.state}
                      data = {item.ListReportHistoryResponse}//{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
                      renderItem = {({ item, index }) => {
                        return (
                          <View>
                          <View style={{flexDirection: 'row'}}>
                            <Text style={{
                              marginLeft: wp('5%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#717171"
                            }}>Etapa</Text>
                            <Text style={{
                              marginLeft: wp('42.5%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#717171"
                            }}>Horas</Text>
                          </View>
                          <View style={{flexDirection: 'row'}}>
                            <ModalDropdown
                              adjustFrame={style => {
                                style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
                                return style;
                              }}
                              dropdownTextStyle={styles.dropdownTextStyle}
                              dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
                              dropdownStyle={styles.dropdownStageStyle}
                              defaultValue={item.Etapa}
                              style={styles.dropStageStyle}
                              textStyle={{
                                padding: 0,
                                margin: 0,
                                fontSize: rfv(16),
                                paddingVertical: hp('1.2%'),
                                fontWeight: 'normal',
                                fontStyle: 'normal',
                                textAlign: 'left',
                                color: item.Etapa /*item.ListReportHistoryResponse[index2].Etapa*/ != 'Selecciona una etapa' ? '#1a1a1a' : '#c4c4c4',
                              }}
                              //onSelect={(index, value) => this.setState({SeleccionClientes: value})}
                              //options={Object.keys(this.state.items)}
                              onSelect={(index, value) => this.setState({SeleccionClientes: value})}
                              options={DataManager.ListEtapa}
                            />
                            <View style={styles.InputContainerHours}>
                              <Text style={styles.InputTextHours}>{item.HorasTrabajadas}</Text>
                            </View>
                            <TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('5.5%')}} onPress={() => this.props.onSubstract}>
                              <Image source={Images.menos_hora}/>
                            </TouchableOpacity>
                            <TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('2%')}} onPress={() => this.props.onAdd}>
                              <Image source={Images.mas_hora}/>
                            </TouchableOpacity>
                          </View>
                          <Text style={{
                            fontSize: rfv(14),
                            marginLeft: wp('5%'),
                            fontWeight: "normal",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#717171"
                          }}>Observaciones</Text>
                          <Input
                            autoCapitalize="none"
                            maxLength={100}
                            inputContainerStyle={styles.InputContainerComentarioOnBlur}
                            containerStyle={styles.InputComentario}
                            inputStyle={styles.InputTextHoursRInput}
                            placeholderTextColor={'#c4c4c4'}
                            placeholder="(Opcional)"
                            onChangeText={value => this.setState({})}
                          />
                          <TouchableOpacity style={{alignItems: 'flex-end', alignSelf: 'flex-end'}}>
                            <Text style={{
                              marginRight: wp('3.4%'),
                              marginBottom: hp('3%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#1062cc"
                            }}>Agregar etapa</Text>
                          </TouchableOpacity>
                        </View>
                        )}}/>
                        </Collapsible>
                        </View>
                )
              }}
            />

编辑:更新了平面列表中显示的对象的屏幕截图，我仍然需要帮助才能使其正常工作

<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{item.HorasTrabajadas}</Text>
</View>
<TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('5.5%')}} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora}/>
</TouchableOpacity>
<TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('2%')}} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora}/>
</TouchableOpacity>

onadd 是一个假定的函数，除了当前值之外还添加到 item.HorasTrabajadas, 0.5，而 onsubstract 是相同的，但减去当前值

这是对象

编辑 2:如果 api 包含已保存数据的对象，我该如何编辑新数据？

编辑3:我添加了一个github项目，其中包含该项目的3个最重要的部分，https://github.com/Vasault/HourReg/tree/develop包含3个文件，最重要的一个HourRegistration.tsx

编辑4:无法更改已经来自api的数据

Answer 1

您可以使用index of your array to identify the selected item ，当您有每次索引时，您可以根据需要更新每个操作的项目。

假设您有 10 个项目，并且在每个项目上，您必须更新状态才能获得 item and index该行的并且可以轻松更新状态。

这是一个简单的例子，可以消除您的困惑。 这是带有工作示例的小吃

https://snack.expo.io/@waheed25/radarada

import React from 'react';
import { SafeAreaView, View, TextInput, FlatList, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default class  App extends React.Component {

  state={
    observacionesInput: []
  }
   onTextObservacionesChange = (text, index) => {
    var { observacionesInput } = this.state
    let myArray = observacionesInput
        myArray[index] = text
    this.setState({observacionesInput: myArray });
  }
  toggleExpanded = () => {
    this.setState({ isCollapsed: !this.state.isCollapsed });  
  };
  render(){
    console.log('state', this.state)
  return (
    <SafeAreaView>
    <Text>Testing</Text>
      <FlatList
        data={DATA}
        renderItem={({ item, index }) => { 
          return(
            <View style={{  marginTop: 20}}>
              <TextInput
               style={{borderColor: 'gray', borderWidth: 1, height: 50,}}
                autoCapitalize="none"
                maxLength={100}
                placeholderTextColor={'#c4c4c4'}
                placeholder="(Opcional)"
                onChangeText={value => this.onTextObservacionesChange(value, index)}
              />
            </View>
          )
        }}
      />
    </SafeAreaView>
  );
  }
}