如何获取FlatList中下拉框变更的指定行对应值？

Alright, let's work through this problem. The core challenge here is linking the dropdown's value change event to the specific row in your FlatList, so you can track exactly which item's value was updated and access that row's full data.

Here's a step-by-step solution with modified code to make this work:

1. Refactor the selectRole method to accept row-specific parameters #

Instead of calling a generic selectRole(), we need to pass the current row's item and index to the method. This way, the dropdown inside can directly reference which row it belongs to.

2. Update the dropdown's onValueChange to handle row data #

When the dropdown's value changes, we'll capture both the selected value and the corresponding row's item/index. We’ll update your component state (to keep the FlatList in sync via extraData) and have direct access to the row's values whenever needed.

Modified Full Code Example #

<FlatList
  keyExtractor={(item, index) => item.unit + index}
  extraData={this.state.residentList}
  onViewableItemsChanged={}
  renderItem={({ item, index }) => (
    <Card style={{ height: 100 }}>
      <View style={{ height: 1, backgroundColor: 'lightgray' }} />
      <View style={{ flexDirection: 'row', flex: 1 }}>
        <View style={{ flex: 1 }}>
          <View style={{ flexDirection: 'column' }}> {/* Fixed typo: Style → style */}
            <Text style={styles.textDetails}>{`ddd: ${item.a1}`}</Text>
            <Text style={styles.textDetails}>{`rrr: ${item.b1}`}</Text>
            <Text style={styles.textDetails}>{`rr1: ${item.c1}`}</Text>
          </View>
        </View>
        <View style={{ flex: 0.5, marginRight: 30 }}>
          {/* Pass current row's item and index to selectRole */}
          {item.role == 'xyz' ? this.selectRole(item, index) : <Text> </Text>}
        </View>
      </View>
      <View style={{ height: 1, backgroundColor: 'lightgray' }} />
    </Card>
  )}
/>

// Define the selectRole method in your component
selectRole = (currentItem, currentIndex) => {
  // Replace with your actual dropdown options
  const roleOptions = [
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' },
    { label: 'Guest', value: 'guest' }
  ];

  return (
    <Picker
      selectedValue={currentItem.selectedRole || ''} // Bind to the item's saved selected value
      onValueChange={(selectedValue) => {
        // 1. Directly access the specific row's data here
        console.log(`Row ${currentIndex} full data:`, currentItem);
        console.log(`Selected value for row ${currentIndex}:`, selectedValue);

        // 2. Update state to sync the change with FlatList
        const updatedResidentList = [...this.state.residentList];
        updatedResidentList[currentIndex] = {
          ...currentItem,
          selectedRole: selectedValue
        };
        this.setState({ residentList: updatedResidentList });
      }}
    >
      {roleOptions.map((option) => (
        <Picker.Item label={option.label} value={option.value} key={option.value} />
      ))}
    </Picker>
  );
};

Key Details to Note: #

• Passing item and index: This gives the dropdown immediate context about which row it’s in, so you never lose track of which data corresponds to the changed value.
• State update: By updating the residentList state with the new selected value, the FlatList will re-render correctly (thanks to extraData watching residentList), and the dropdown will retain its selected state across re-renders.
• Direct data access: Inside onValueChange, currentItem gives you full access to the row’s a1, b1, c1 values, so you can use them for any logic you need right away.

This approach ensures you always have the right row’s data whenever the dropdown in that row changes.

内容的提问来源于stack exchange，提问作者rohit palankar