Question

我正在使用带复选框的ListItems。列表中的每个项目都包含复选框。我无法选中或取消选中该复选框，也无法选中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

尝试将extraData={this.state}传递到FlatList组件。

https://facebook.github.io/react-native/docs/flatlist#extradata

编辑：

您可能只想通过extraData={this.state.checked}。您的FlatList仅应在选中状态更改时重新呈现。根据需要传递其他道具。

Answer 2

好像您忘了绑定this.selectAll（）和checkBoxTest（）

如果要将函数传递给$ ./bin/readprintstream enter bookno units_sold price: 23 banannas 12.28 error: invalid input，首先需要将其绑定到构造函数中。

onPress()

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

CheckBox在使用Flatlist呈现的ListItem中不起作用

2 个答案:

编辑：