javascript - RN 复选框作为卡片和多选

Question

我必须从卡片列表中选择一张或两张卡片，点击每张卡片/复选框后，该卡片就会突出显示(并被选中)。每张卡上都有复选框，显示通过其进行选择的特定卡。您可以重新点击同一复选框以取消选择它。

我对原生 react 还很陌生，并且对如何实现此功能感到困惑。这是供引用的代码。

import React, { Component } from 'react';

import {View, Image, StyleSheet} from 'react-native';

import { Container, Content, ListItem, CheckBox, Text, Body } from 'native-base';

export default class Career extends Component {
    topics = ['abc','def', 'ghi', 'jkl']
  render() {
    const extract = this.topics.map((topic, i) => {
        return(
            <View style={styles.cardContainer}>
             <Image style={{width:50, height:50}} source={require('../../assets/images/idcLogo.png')}/>
             <CheckBox checked={false}></CheckBox>
             <Text>{topic}</Text>
         </View>
        )
    });
    return (
      <Container>
        <Content>
            <View style={styles.mainContainer}>
          {extract}
          </View>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
    cardContainer: {
        borderRadius:5,
        borderColor:"#ccc",
        borderWidth:2,
        justifyContent:'center',
        alignItems:'center',
        width:'50%',
        margin:5
    },
    mainContainer:{
        justifyContent:'center',
        width:'100%',
        alignItems:'center',
        flex:1
    }
})

如果您需要任何其他信息，请告诉我。提前致谢

Answer 1

我会更改 <View style={styles.cardContainer}></View>进入<TouchableOpacity style={styles.cardContainer}>然后我将添加一个函数来监视按钮的选中状态的变化。

1. 我将在渲染函数之前添加此函数


handleOnTap = (topic) => {
this.setState(prevState => ({ [topic]: !prevState[topic], });
}

<Checkbox onPress={() => this.handleOnTap(topic)} checked={!!this.state[topic]} />

不要忘记通过 this.topics.map 添加一个生成元素的键； <TouchableOpacity style={styles.cardContainer} key={主题-${i} }>

希望有帮助