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

我必须从卡列表中选择一张或两张卡，点击每张卡/复选框，该卡将突出显示（并被选中）。每张卡上都有复选框，该复选框显示用于选择的特定卡。您可以重新点击同一复选框以取消选择它。

我是新来的人，对如何实现此功能感到困惑。这是供参考的代码。

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
    }
})

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

最佳答案

我将<View style={styles.cardContainer}></View>更改为<TouchableOpacity style={styles.cardContainer}>，然后添加一个功能来监视按钮的检查状态更改。


我将在render函数之前添加此函数


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={ topic-$ {i} }>


希望能有所帮助

关于javascript - RN复选框作为卡和多选，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59175515/