javascript - 复选框不改变 react native 元素

Question

嗨，我正在做一个类似于带有复选框的组件，用于标记用户是女性还是男性，但我无法让它工作，它看起来像我想要的，但我无法做出标记从一个选项更改为另一个选项，我也无法传递要提交的值

感谢任何帮助

注意:我正在使用库 react-native-elements对于<CheckBox />组件。

这是我的代码

import React, {  useContext,useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

import MyDatePicker from './MyDatePicker';
import { CheckBox } from 'react-native-elements';

const PersonalForm = ({onSubmit, errorMessage}) => {
    const [vName, setvName] = useState('');
    const [vSecondName, setvSecondName] = useState('');
    const [selectedValue, setSelectedValue] = useState(true);


return ( 
    <ScrollView>
      <View style={styles.buttonContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvName => setvName(newvName)}
            value={vName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputs}
            placeholder="Segundo nombre"
            underlineColorAndroid='transparent'
            onChangeText={newvSecondName => setvSecondName(newvSecondName)}
            value={vSecondName}
            autoCorrect={false}
            autoCapitalize='characters'
          />
          </View>
          </View>
          <CheckBox
            containerStyle={styles.checkbox}
            textStyle={styles.checkboxTxt}
            uncheckedColor={'#b3b4b5'}
            checkedColor={"#911830"}
            key={4}
            title="Male"
            value={4}
            value="4"
            checkedIcon="stop"
            checked={selectedValue}
            onChange={()=>setSelectedValue(true)}
          />
          <CheckBox
            containerStyle={styles.checkbox}
            textStyle={styles.checkboxTxt}
            uncheckedColor={'#b3b4b5'}
            checkedColor={"#911830"}
            key={3}
            title="Female"
            value={3}
            value="3"
            checkedIcon="stop"
            checked={!selectedValue}
            onChange={()=>setSelectedValue(false)}
          />
          <View>
              <MyDatePicker />
          </View>
              <View style={styles.buttonContainer2}>
              <TouchableOpacity 
                style={ styles.logout}  
                onPress={() => onSubmit(vName, vSecondName, vGender, vEmail)}
              >
                  <Text style={styles.loginText}>GUARDAR</Text>
              </TouchableOpacity>
          </View>
        </ScrollView>
    );
};

Answer 1

您使用的回调错误。正如 docs 中提到的，您要查找的回调是 onPress 而不是 onChange。

将其更改为:

 <CheckBox
        containerStyle={styles.checkbox}
        textStyle={styles.checkboxTxt}
        uncheckedColor={'#b3b4b5'}
        checkedColor={"#911830"}
        key={4}
        title="Male"
        value={4}
        value="4"
        checkedIcon="stop"
        checked={selectedValue}
        onPress={()=>setSelectedValue(true)}
      />
     <CheckBox
        containerStyle={styles.checkbox}
        textStyle={styles.checkboxTxt}
        uncheckedColor={'#b3b4b5'}
        checkedColor={"#911830"}
        key={3}
        title="Female"
        value={3}
        value="3"
        checkedIcon="stop"
        checked={!selectedValue}
        onPress={()=>setSelectedValue(false)}
      />