检查另一个本机反应时自动取消选中复选框

Question

我有两个复选框（来自 react-native 元素），我们称它们为框 a 和框 b，其中一次只能检查其中一个（不能多选），iow - 如果框 a已选中，则无法选中框 b。因此，到目前为止，如果我错误地选中了框 a，我需要再次单击手动取消选中框 a，以便选中框 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);
  };