平面列表中的 ReactNative 复选框答案

【问题标题】：ReactNative checkbox inside flatlist平面列表中的 ReactNative 复选框
【发布时间】：2019-11-21 00:11:48
【问题描述】：

我在 Flatlist 中有这样的复选框

constructor(props) {
  super(props);
    this.state = { 
      checked: false
    }
 }
 breakfastData = ({item}) => {
   return(
        <ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
          <Text>{item}</Text>
          <CheckBox 
              checked={this.state.checked}
              onPress={() => this.setState({checked: !this.state.checked})}  style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
        </ListItem>
        )
 }
 render(){
   return(
        <View>
          <FlatList
            data={this.state.breakfast}
            renderItem={ this.breakfastData }
            keyExtractor={(item, index) => index}
          />
        </View>
        )
 }

这是应用程序的屏幕截图，但当我单击任何复选框时复选框不起作用我只是想让用户觉得复选框被选中

【问题讨论】：

尝试用 Touchable 包裹它

标签： react-native

【解决方案1】：

您必须为每个项目设置检查。

      constructor(props) {
        super(props);
        this.state = { 
          breakfast:[
          {id:1,checked:false},
          {id:2,checked:false}
          ]
        }
      }
onItemPress = (item, index) => {
    var tempItem = item
    tempItem.checked = !item.checked
    const tempArr = [...this.state.breakfast]
    tempArr[index] = tempItem
    this.setState({
      breakfast: tempArr
    })
  }
              breakfastData = ({item}) => {
               return(
              <ListItem style={{flex:1 , flexDirection: 'row' , justifyContent:'space-between'}} >
                <Text>{item}</Text>
                <TouchableOpacity  onPress={() => {this.onItemPress(item,index)}}>
                       <CheckBox  checked={item.checked}  style={{ alignSelf: 'flex-end'}} color="#FC7B04" />
                </TouchableOpacity>
              </ListItem>
            )
          }
        render(){
        return(
        <View>
                        <FlatList
                          data={this.state.breakfast}
                          renderItem={ this.breakfastData }
                          extraData ={ this.state}
                          keyExtractor={(item, index) => index}

                        />
        </View>
        )
        }

【讨论】：

别提了