获取SectionList项目的索引React-Native

n4z*_*4zg 1 javascript react-native react-native-sectionlist

我在从SectionList React-Native 获取标题项的索引时遇到问题。通过按标题,我尝试获取该项目的索引,然后将其传递给函数。我尝试了很多事情但没有运气。有什么建议。谢谢

在此输入图像描述

我想按 3-30pm 返回索引 0 我可以按 Lucian,它返回我 0 这个想法是通过获取标题索引,我可以使用数组来从列表中删除项目。

            <SectionList style = {styles.itemSquare}

        renderItem = {({item, index, section}) =>
            < Text style={styles.SectionListItemStyle} key = {index}
            onPress={this.GetSectionListItem.bind(this, this.state.slotkeys[index])}> {item}
            < /Text>}

            renderSectionHeader = {({section: {title}, index}) => (
                  <TouchableHighlight >
                    <View>
                      <Text style={styles.SectionHeaderStyle}
                      onPress={this.GetSectionListItem.bind(this, index)}
                      > {title}
                      <Text style={styles.SectionHeaderCancel} > {index} < /Text>
                      </Text>
                    </View>
                  </TouchableHighlight>
                )
            }

          sections = {this.state.slots.map(({ time, chosen_user, name, chosen_syllabud, user_id }) =>
          ({ title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index:1 }))}

          keyExtractor = {(item, index) => item + index}
          />
Run Code Online (Sandbox Code Playgroud)

And*_*nob 5

renderSectionHeader 属性在调用时不会接收索引作为参数,但您可以修复sections属性以通过映射正确传递索引:

  sections = {this.state.slots.map(({ time, chosen_user, name, chosen_syllabud, user_id }, index) =>
      ({ title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index }))}
Run Code Online (Sandbox Code Playgroud)

然后在 renderSectionHeader 上您可以访问该部分内的索引:

renderSectionHeader = {({section: {title, index}}) => (
              <TouchableHighlight >
                <View>
                  <Text style={styles.SectionHeaderStyle}
                  onPress={this.GetSectionListItem.bind(this, index)}
                  > {title}
                  <Text style={styles.SectionHeaderCancel} > {index} < /Text>
                  </Text>
                </View>
              </TouchableHighlight>
            )
        }
Run Code Online (Sandbox Code Playgroud)