I'm trying to set up my first android app in React Native.
Now there's this card (react-native-component) with multiple Checkboxes inside (see code below).
Everytime I try to select only one Checkbox, it somehow checks all of them.
I know it has something to do with multiple states but I can't get it to work.
Anyone that can help me?
JS File
import React from "react";
import {StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform, TouchableOpacity} from 'react-native';
import { Card, CheckBox, Button } from 'react-native-elements';
export default class AgendaItemVote extends React.Component {
constructor(props) {
super(props);
this.state = { checked: false };
}
render(){
return(
<View style={styles.container}>
<Card title="Titel Agendapunt">
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at sapien at tellus interdum finibus. Nunc sagittis tincidunt orci, non viverra ligula feugiat id. Phasellus eleifend massa neque, eu scelerisque enim feugiat ac.
</Text>
<View style=>
<CheckBox
title='Ja'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
<CheckBox
title='Nee'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
<CheckBox
title='Onthouding'
checked={this.state.checked}
onPress={() => this.setState({
checked: !this.state.checked
})}
/>
</View>
<View>
<Button
title="Indienen"
/>
</View>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
Thanks for your help in advance.
Kind Regards
Aucun commentaire:
Enregistrer un commentaire