javascript - CheckBox 在使用 Flatlist 渲染的 ListItem 中不起作用

Question

我正在使用带有复选框的 ListItems。列表中的每个项目都包含复选框。我无法选中或取消选中复选框，也无法选择列表项中的所有复选框。我已经使用“checkBoxTest()”和“selectAll()”创建了两个函数，我认为我没有正确使用 setState。这是我的代码

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { ListItem, checkBox } from 'react-native-elements';

const list = [
  {
    name: 'PinkMan',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Mr White',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
]


export default class Members extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,

    }
  }
  selectAll(){
    this.setState({checked: !this.state.checked})
  }

  checkBoxTest() { 
    this.setState({checked: !this.state.checked})
  } 

  keyExtractor = (item, index) => index.toString()
  renderItem = ({ item }) => (
    <ListItem
      title={item.name}
      subtitle={item.subtitle}
      leftAvatar={{
        source: item.avatar_url && { uri: item.avatar_url },
        title: item.name[0]
      }}
      checkBox={{
        checkedColor: '#744DD2',
        uncheckedColor: 'grey',
        onPress: this.checkBoxTest,
        checked: this.state.checked,
      }}
      bottomDivider
    />
  )

  render() {
    return(
      <>
        <View style={{ bottom: 60 }}>
          <FlatList
            keyExtractor={this.keyExtractor}
            data={list}
            renderItem={this.renderItem}
          />
        </View>
        <View>
          <TouchableOpacity onPress={this.selectAll} >
            <Text style={styles.textStyle}>Select All</Text>
          </TouchableOpacity>
        </View>
      </> 
    );
  }
}

Answer 1

好像你忘记绑定(bind) this.selectAll() 和 checkBoxTest()

如果你想传递一个函数给onPress()，首先你需要在构造函数中绑定(bind)它。

this.selectAll = this.selectAll.bind(this); 
this.checkBoxTest = this.checkBoxTest.bind(this);

将这两个语句放在构造函数中。