Как использовать кнопку реагировать родные элементы с избыточной формой?

Question

Я использую компоненты реактивных элементов в своем приложении-реактиве.

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
import {Icon,CheckBox} from 'react-native-elements';
 const renderField=({label,keyboardType,name,icon,iconType,input:{onChange,...restInput}}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Input onChangeText={onChange} {...restInput} keyboardType={keyboardType} placeholder={label} inputContainerStyle={{borderWidth:2,borderColor:'lightgrey',borderRadius:20}} inputStyle={{color:'grey'}} leftIcon={<Icon size={25} type={iconType} name={icon} color="grey" />} errorStyle={{fontSize:15}} errorMessage="error" />
            </View>
    )
}
 const checkBoxField=({label,keyboardType,name}) => {
 var val=true;

    return(
            <View >
                <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                    <Text style={{fontSize:18}}>{label}</Text>
                    <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o'   containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />     
                    <CheckBox  title='Female' checkedIcon='dot-circle-o' uncheckedIcon='circle-o'  containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />
                </View>
                <View><Text style={{fontSize:15,color:'red'}}>error</Text></View>
            </View>
    )
}
const submit = values => {
  console.log('submitting form', values)
}
const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:20,justifyContent:'flex-start',alignItems:'center'}}>

                <Field label="Username" component={renderField} name="username" icon="user" iconType="font-awesome" />
                <Field label="Email" component={renderField} name="email" icon="email" iconType="zocial" />
                <Field label="Gender" component={checkBoxField} name="gender" />
                <Button title='SUBMIT'  onPress={handleSubmit(submit)}  />
            </View>
    )
}
const Register=reduxForm({
    form:'register',

})(RegisterForm);
export default Register;

в приведенном выше коде я использую форму редукса в моем приложении-реактиве, передавая onChange (), я могу получить значения ввода текста, но как я могу получить значения переключателя? В настоящее время форма содержит ввод текста только значения, мне нужно добавить значения переключателя также. Если пользователь выбирает одно значение в переключателе, мне нужно отменить выбор другого переключателя, как это будет возможно?

Answer 1

Вы можете использовать ответный родной радиовход. Его очень просто использовать.

import RadioGroup,{Radio} from "react-native-radio-input";
.
.
.
//Receive the checked value (ES6 syntax)
getChecked = (value) => {
// value = our checked value
alert(value)
}
 <RadioGroup getChecked={this.getChecked}>
  <Radio iconName={"lens"} label={"The first option"} value={"A"} />
  <Radio iconName={"lens"} label={"The first option"} value={"B"} />
  <Radio iconName={"lens"} label={"I need numbers"} value={1} />
  <Radio label={"Is IconName Optional?"} value={"Yes"} />
  <Radio label={"Show Sentence Value"} value={"This is a Sentence"} />
</RadioGroup>
.
.