选中另一个react native时自动取消选中复选框

Question

我有两个复选框(来自react原生元素(，我们称它们为框a和框b，一次只能选中其中一个(没有多选(，iow-如果选中了框a，就不可能选中框b，以便选中框b。但是，我希望能够通过单击并选中框b来自动取消选中框a——如果这有意义的话。

我试着研究了54111540和其他问题，但那里的答案似乎都无助于我想要实现的目标。

我的代码：

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import { slider } from '../../components/SliderStyle';
import { useDispatch } from 'react-redux';
import { addfirstrole } from '../../redux/actions/index';
import store from '../../redux/store';
import * as firebase from 'firebase';
const RoleScreen = ({ navigation }) => {
const dispatch = useDispatch()
const addFirstRole = firstRole => dispatch(addfirstrole(firstRole))
const [landlordChecked, setLandlordChecked ] = useState(false)
const [tenantChecked, setTenantChecked] = useState(false)
const user = firebase.auth().currentUser
return (
<View>
<Text>Role screen</Text>
<CheckBox
title='Jeg er utleier'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={landlordChecked}
onPress={tenantChecked ? () => setLandlordChecked(false) : () => setLandlordChecked(!landlordChecked)}
/>
<CheckBox
title='Jeg er leietaker'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={tenantChecked}
onPress={landlordChecked ? () => setTenantChecked(false) : () => setTenantChecked(!tenantChecked)}
/>
<TouchableOpacity onPress={() => { navigation.navigate('Search'); addFirstRole(user.uid); console.log(store.getState()); }}>
<View style={slider.buttonStyle}>
<Text style={slider.textStyle}>Neste</Text>
<Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
</View>
</TouchableOpacity>
</View>
)
} 
const styles = StyleSheet.create({})
export default RoleScreen;

Answer 1

试试这个，这将帮助你

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import { useDispatch } from 'react-redux';
import * as firebase from 'firebase';
const RoleScreen = ({ navigation }) => {
const [landlordChecked, setLandlordChecked ] = useState(false)
const [tenantChecked, setTenantChecked] = useState(false)
return (
<View>
<Text>Role screen</Text>
<CheckBox
title='Jeg er utleier'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={landlordChecked}
onPress={landlordChecked ? () => setLandlordChecked(false) : () => [setLandlordChecked(true),setTenantChecked(false)]}
/>
<CheckBox
title='Jeg er leietaker'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={tenantChecked}
onPress={tenantChecked ? () => setTenantChecked(false): () => [setTenantChecked(true),setLandlordChecked(false)]}
/>
</View>
)
} 
const styles = StyleSheet.create({})
export default RoleScreen;

根据您的要求进行更改。无需任何疑问

Answer 2

这是如何在选中的情况下取消选中其他值

这是我们用onPress 调用的函数

data3.checked为真或假data3.filterx.id是过滤器id

onPress声明是

{data4.map((item) => {
return (
<TouchableOpacity
style={{
flexDirection: "row",
alignItems: "center",
}}
key={item.filterx.id}
onPress={() => handleChange4(item.filterx.id)}
>
<CheckBox checked={item.checked} />
<Text>{item.filterx.title}</Text>
</TouchableOpacity>
);
})}

const handleChange3 = (id) => {

let temp = data3.map((data3) => {
if (id === data3.filterx.id) {
return { ...data3, checked: !data3.checked };
}
return data3;
});
for (var i = 0; i < data3.length; i++) {
data3[i].checked = false;
}
data3.checked = true;
console.log(temp);
setdata3(temp);
};