如何访问我的复选框组件状态？

Question

嗨，我正在用 React Native 做某种表单，我有这个可以正常工作的复选框组件，但我无法在我的 form.js 上获取他的值。 我对 datepicker 等其他组件也有同样的问题。 我无法传递值

任何建议都会受到赞赏

这是我的复选框组件

import { CheckBox } from 'react-native-elements';

export default class CheckBoxs extends Component {

  constructor() {
    super();
    this.state = {
      checked1: true,
      checked2: false,
    };
  }
  render() {
    return (
      <View style={styles.checkbox} >
        <CheckBox
          containerStyle={styles.checkbox}
          textStyle={styles.checkboxTxt}
          uncheckedColor={'#b3b4b5'}
          checkedColor={"#911830"}
          key={1}
          title="Mujer"
          value={1}
          value="1"
          checkedIcon="stop"
          checked={this.state.checked1}
          onPress={() => this.setState({ checked1: !this.state.checked1, checked2: this.state.checked1 })}
        />
        <CheckBox
          containerStyle={styles.checkbox}
          textStyle={styles.checkboxTxt}
          uncheckedColor={'#b3b4b5'}
          checkedColor={"#911830"}
          key={0}
          title="Hombre"
          value={0}
          value="0"
          checkedIcon="stop"
          checked={this.state.checked2}
          onPress={() => this.setState({ checked2: !this.state.checked2, checked1: this.state.checked2 })} 
        />
      </View>
    );
  }
}

这是我的表单代码

    import CheckBoxs from './CheckBoxs';

const PersonalForm = ({onSubmit, errorMessage}) => {
    import CheckBoxs from './CheckBoxs';

const PersonalForm = ({onSubmit, errorMessage}) => {
    const [vName, setvName] = useState('');
    const [vSecondName, setvSecondName] = useState('');
    const [vLastName, setvLastName] = useState('');
    const [vSecondLastName, setvSecondLastName] = useState('');
    const [vCellphone, setvCellphone] = useState('');
    const [vBirthDate, setvBirthDate] = useState('');
    const [vRFC, setvRFC] = useState('');
    const [vGender, setvGender] = useState('');
    const [vEmail, setvEmail] = useState('');
    const [checked] = useState('false');


    return ( 
        <ScrollView>
          <View style={styles.buttonContainer}>
              <View style={styles.inputContainer}>
                <TextInput style={styles.inputs}
                  placeholder="Apellido materno"
                  onChangeText={newvSecondLastName => setvSecondLastName(newvSecondLastName)}
                  underlineColorAndroid='transparent'
                  value={vSecondLastName}
                  autoCorrect={false}
                  autoCapitalize='characters'
                />
              </View>
              <View>
                <MyDatePicker />
              </View>
              <View style={styles.checkbox} >
                <CheckBoxs />
              </View>    
              <View style={styles.inputContainer}>
                <TextInput style={styles.inputs}
                  placeholder="Correo electrónico"
                  underlineColorAndroid='transparent'
                  onChangeText={newvEmail => setvEmail(newvEmail)}
                  value={vEmail}
                  autoCorrect={false}
                  autoCapitalize='characters'
                />
              </View>
          </View>
          <View style={styles.buttonContainer2}>
              <TouchableOpacity 
                style={ styles.logout}  
                onPress={() => onSubmit(vName, vSecondName, vLastName, vSecondLastName, vCellphone, vBirthDate, vRFC, vGender, vEmail),console.log(vName, vSecondName, vLastName, vSecondLastName, vCellphone, vBirthDate, vRFC, vGender, vEmail)}
              >
                  <Text style={styles.loginText}>GUARDAR</Text>
              </TouchableOpacity>
          </View>
        </ScrollView>
    );
};

Answer 1

让您的组件接受“onChange”回调（通过 props），并在值更改时使用新值调用它。

例如：

<Parent>
    <Kid onChange={ newValue => { /* use the new value... */ } }/>
</Parent

或者另一个例子：

const Parent = () => (
    <View>
        <TwoCheckboxes
            onChange={
                newValues => console.log('parent got new values', newValues)
            }
        />
    </View>
);

const TwoCheckboxes = props => {

    const [ values, setValues ] = useState([ true, false]);
    const [ val1, val2 ] = values;

    const updateValuesAndReportChange = (newValues) => {
        setValues(newValues);
        props.onChange(newValues); /** this will pass updated values to Parent */
    };

    return (
        <View>
            <Checkbox
                onPress={ () => updateValuesAndReportChange([ !val1, val2 ]) }
            />
            <Checkbox
                onPress={ () => updateValuesAndReportChange([ val1, !val2 ]) }
            />
        </View>
    );
};

Answer 2

在React Native Docs 中：

这是一个受控组件，它需要一个onValueChange回调来更新value prop，以便组件反映用户操作。 如果value prop 没有更新，组件将继续呈现提供的 value prop，而不是任何用户操作的预期结果。

因此，将onValueChange添加到您的 Checkbox 组件。 将它提供给您的值存储在组件状态中，并通过其value属性将该状态传递给 Checkbox。

一个例子：

<Checkbox onValueChange={value => /** update **/} value={/** stored value **/} ... />