reactjs - 如何将父平面列表的索引值传递给子平面列表的 onPress 函数？

Question

如何将父 Flatlist 的索引值传递给子 Flatlist 的函数，以便我可以在函数中使用它并通过 setState 更改值。那么如何将父 Flatlist 的索引值传递给子 Flatlist 的函数，以便我可以在函数中使用它并通过 setState 更改值。

它以一个内置状态的列表开始

constructor(props) {
  super(props);

  this.state = {
    list: [
      {
        question: 'il veicolo ha la gomma forata?',
        answers: [
          {
            radioButtonValue: false,
            text: strings.CONFIRMVIEW_yes,
          },
          {
            radioButtonValue: true,
            text: strings.CONFIRMVIEW_no,
          },
        ],
      },
    ]
  }
}

checkBoxSelection = (item, index) => {
  // if (item.radioButtonValue == index) {
  //     this.list.answers[index].radioButtonValue = true
  // }
  console.log(this.state.list[0].answers[index].radioButtonValue)
}

_renderItem = ({ item, index }) => {
  return (
    <View style={styles.cellView}>
      <Text style={styles.questionText}>
        {item.question.toUpperCase()}
      </Text>
      <FlatList
        data={item.answers}
        horizontal={true}
        showsHorizontalScrollIndicator={true}
        scrollEnabled={true}
        bounces={false}
        renderItem={this._renderItemOptions}
      />
      {/* <View style={styles.yesNoRadioButtonView}>
              <View style={styles.yesChekboxView}>
                  <TouchableOpacity onPress={ () => {console.log("TEST1"); this.checkBoxSelection()}  }>
                  <Image source={(item.answers == index) ? AppImages.radioOn : AppImages.radioOff} style={styles.radioButton} />
                  </TouchableOpacity>
                  <Text style={styles.yesNoText}>
                      {strings.CONFIRMVIEW_yes}
                  </Text>
              </View>
              <View style={styles.noRadioButtonView}>
                  <TouchableOpacity onPress={() => { this.checkBoxSelection.bind(this) }}>
                  <Image source={(item.answers == 0) ? AppImages.radioOn : AppImages.radioOff} style={styles.radioButton} />
                  </TouchableOpacity>
                  <Text style={styles.yesNoText}>
                      {strings.CONFIRMVIEW_no}
                  </Text>
              </View>
          </View> */}
    </View>
  )
}

_renderItemOptions = ({ item, index }) => {
  return (
    <View>
      <View style={styles.yesNoRadioButtonView}>
        <TouchableOpacity onPress={() => { this.checkBoxSelection(item, index) }}>
          <View style={styles.yesChekboxView}>
            <Image
              source={item.radioButtonValue ? AppImages.radioOn : AppImages.radioOff}
              style={styles.radioButton}
            />
            <Text style={styles.yesNoText}>
              {item.text}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  )
}

render() {
  return (
    <Container>
      <Content style={styles.container}>
        <FlatList
          data={this.state.list}
          showsVerticalScrollIndicator={false}
          scrollEnabled={false}
          bounces={false}
          renderItem={this._renderItem}
        />
      </Content>
      <SafeAreaView>
        <TouchableOpacity
          style={[LayoutStyle.appBtn1]}
        >
          <Text style={[LayoutStyle.appBtnText1]}>
            {strings.DAMAGE_SURVEY_comeOn.toUpperCase()}
          </Text>
        </TouchableOpacity>
      </SafeAreaView>
    </Container>
  )
}

标签： reactjsreact-nativereact-native-flatlist

Answer 1

在 Parent Flatlist 的 renderItem 函数中替换

renderItem = { () => {this.renderItemOptions(item, index)}}

和

renderItem={(childData) => this._renderItemOptions(childData, index)}

然后在子 Flatlist 的 renderItemOption 函数中需要使用另一个名称获取 parentIndex。

_renderItemOptions = ({ item, index }, parentIndex) => {
        console.log("hello")
        return (
            <View>
                <View style={styles.yesNoRadioButtonView}>
                    <TouchableOpacity onPress={() => { this.checkBoxSelection(item, index, parentIndex) }}>
                        <View style={styles.yesChekboxView}>
                            <Image
                                source={item.radioButtonValue ? AppImages.radioOn : AppImages.radioOff}
                                style={styles.radioButton}
                            />
                            <Text style={styles.yesNoText}>
                                {item.text}
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }