如何在 FlatList React Native 中實現復選框

Question

我正在嘗試在從后端獲取數據 API 時實現一個復選框，但我遇到的問題是所有復選框都已選中，我無法取消選中它，以及如何將選中的復選框作為參數傳遞到下一個組件。 我希望我能得到一些幫助。

這就是我當前代碼中的內容；

 class Gifts extends Component {
    constructor(props){
      super(props);
      this.state={
        users:'',
        checked: {},
        selected: 0
       
      }
    }

API 手柄復選框代碼

  handleChange = (index) => {
    let { checked } = this.state;
    checked[index] = !checked[index];
    this.setState({ checked });
  }

  onPress(value) {
    this.setState({ selected: value });
}

  render() {
    let { navigation } = this.props
        return (

            <SafeAreaView style={{flex:1 }}>
            <View style={{ flex:1,justifyContent: 'center'}}>
              
               //...codes..//

                    <View style={styles.userlist}>
                    <FlatList
                            data={this.state.users}
                            keyExtractor={(item ,index) => index.toString()}
                            
                            renderItem={({ item }) => (
                                <FlatList
                                  data={item.friendList}
                                  renderItem={({ item }) => 
                                  <View style= {{flexDirection:'row', justifyContent:'space-between'}}>
                                  <Text style={{marginTop:20, marginLeft:10, fontSize: 20}}>{item.name}</Text>
                                  <CheckBox
                                      center
                                      checkedIcon='dot-circle-o'
                                      uncheckedIcon='circle-o'
                                      checked={this.state.checked}
                                      value={ this.state.checked[item.flag]}
                                      onPress={this.onPress}
                                    /> 
                  
                              </View>
                                
                                }
                                  keyExtractor={(item ,index) => index.toString()}
                                  ItemSeparatorComponent ={this.ItemSeparator}
                                />
                            )}
                    />
                    </View>

                  
                  <Button 
                  rounded
                  // disabled={true}  
                  //onPress={}
                  style={{width: 100, justifyContent: 'center',marginLeft:150}}
                  >
                    <Text>Send</Text>
                  </Button>

                </View>

        </SafeAreaView>
                                
              
    );
  }
}

Answer 1

您的代碼的問題是您對所有復選框都使用了一個this.state.checked ，這很難操作。

一種更簡單的方法是將checked的標志（及其值）集成到循環的 FlatList 數據中，在您的示例中，您將擁有類似： this.state.users[i].friendList[j].checked = true/false

因此，對於每個元素，您都可以控制選中的值。 您必須將 onPress function 更改為 setState 元素已選中/未選中

編輯解決方案可能是：

onPress function （您還必須為每個朋友初始化您的用戶 object 並checked=false ）：

onPress(indexUser, indexFriend, value) {
    const { users } = this.state;

    for (let i = 0; i < users.length; i++) {
      if (i === indexUser) {
        for (let j = 0; j < users[i].friendList.length; j++) {
          if (j === indexFriend) {
            const bool = users[i].friendList[j].checked;
            users[i].friendList[j].checked = !bool;
            users[i].friendList[j].value = value;
          }
        }
      }
    }
    this.setState({ users });
  }

復選框組件（你有嵌套的平面列表，也許你可以做一些重構）：

<CheckBox
    center
    checkedIcon='dot-circle-o'
    uncheckedIcon='circle-o'
    checked={item.checked}
    value={item.value}
    onPress={()=>{ this.onPress(indexUser, indexFriend, value) }}
/>