Автоматически снимите флажок при проверке другого реагировать родной - PullRequest
Новая
       18

Автоматически снимите флажок при проверке другого реагировать родной

0 голосов
/ 27 февраля 2020

У меня есть два флажка (из активных элементов), давайте назовем их блоком a и блоком b, где должна быть возможность только одного из них проверять за раз (без множественного выбора), iow - если флажок a установлен флажок, флажок b невозможно. Так что на данный момент, если бы я по ошибке установил флажок a, мне нужно снять флажок a вручную, щелкнув его еще раз, чтобы установить флажок b. Тем не менее, я хочу иметь возможность автоматически снимать флажок a, щелкая и устанавливая флажок b - если это имеет смысл.

Я пытался взглянуть как на проблему 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;

1 Ответ

0 голосов
/ 27 февраля 2020

Попробуйте, это поможет вам 

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;

Измените это в соответствии с вашими требованиями. Не стесняйтесь сомнений

...