Примечание: мы не можем использовать никакую другую библиотеку, например, react-native-element, только response-native и formik.

Я не могу интегрировать флажок, поддерживающий реакцию, с formik. Необходимо установить значение формы формик.

Если я использую InputFields с formic, он работает с тем же кодом.

< Сильный > 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>
  );
}
0
amy 31 Авг 2020 в 22:13

2 ответа

Лучший ответ

Вы можете использовать setFieldValue(fieldName, nextValue) как в документе:

... вместо того, чтобы напрямую назначать обратные вызовы реквизитам, потому что мы должны откуда-то получать fieldName, а с React Native мы не можем получить его автоматически, как в сети (используя атрибут имени ввода). Вы также можете использовать setFieldValue (fieldName, value) и setFieldTouched (fieldName, bool) в качестве альтернативы.

< Сильный > 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>
  );
}
0
Bruno Cardoso 1 Сен 2020 в 22:58

Это помогает заставить его работать, но спасибо @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>
  );
}
0
amy 31 Авг 2020 в 21:35