如何将反应本机复选框与 formik 集成

Question

注意：我们不能使用任何其他库，如 react-native-element 仅 'react-native' 和 'formik'。

我无法将 react-native 复选框与 formik 集成。需要设置formik form的值。

如果我将 InputFields 与蚁酸一起使用，它会使用相同的代码。

Checkbox.js

import React from 'react';
import { CheckBox, Text, StyleSheet, View } from 'react-native';

const Checkbox = ({ children, value, handleChange }) => {
  return (
    <View>
      <View>
        <CheckBox
          type={'checkbox'}
          value={value}
          onValueChange={handleChange}
          checked={value}
        />
        <Text>{children}</Text>
      </View>
    </View>
  );
};

export default Checkbox;

Main.js

  <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             handleChange={handleChange('financiallyResponsible')}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

Answer 1

您可以像 doc 那样使用 setFieldValue(fieldName, nextValue) 说：

... instead of directly assigning the callbacks to props, because we have to get the fieldName from somewhere and with React Native we can't get it automatically like in web (using input name attribute). You can also use setFieldValue(fieldName, value) and setFieldTouched(fieldName, bool) as an alternative.

Checkbox.js

import React from 'react';
import { CheckBox, Text, StyleSheet, View } from 'react-native';

const Checkbox = ({ children, ...props }) => {
  return (
    <View>
      <View>
        <CheckBox
          type={'checkbox'}
          {...props}
        />
        <Text>{children}</Text>
      </View>
    </View>
  );
};

export default Checkbox;

Main.js

  <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
        setFieldValue
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             onValueChange={nextValue => setFieldValue('financiallyResponsible', nextValue)}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

Answer 2

这有助于让它工作，但谢谢@Bruno，你的建议对我有帮助。

checkbox.js

<View>
      <View>
        <CheckBox
          type={'checkbox'}
          value={value}
          onValueChange={handleChange}
          //   checked={value}
          {...props}
        />
        <Text>{children}</Text>
      </View>
    </View>

Main.js

 <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
        setFieldValue
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             handleChange={nextValue => setFieldValue('financiallyResponsible', nextValue)}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

如何将反应本机复选框与 formik 集成

How to integrate react native checkbox with formik

reactjs

react-native

yup

formik