如何将 DropdownPicker setValue 与 Formik handleChange 或 setValueField 一起使用？

Question

如何将下拉选择器 setValue 与 Formik 一起使用？ handleChange 或 setValueField 无法正常工作。有什么建议吗？

  const [open, setOpen] = useState(false);
  const items = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
  ];

  return (
    <Formik
      initialValues={{ fruits: [] }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleSubmit, values }) => (
        <View>
          <DropdownPicker
            schema={{ label: 'label', value: 'label' }}
            open={open}
            setOpen={setOpen}
            value={values.fruits}
            setValue={handleChange('fruits')}
            items={items}
            multiple
          />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  );
};```

Answer 1

您可以将 DropdownPicker 包装在另一个组件中，并使用 useFormikContext 和 useField formik 钩子来使用它，看看这个示例：

import { useFormikContext, useField } from "formik";
import React, { useState } from "react";
import DropDownPicker from "react-native-dropdown-picker";

const DropDownFormik = ({ ...props }) => {
  const [openProvider, setOpenProvider] = useState(false);
  const { setFieldValue } = useFormikContext();
  const [field] = useField(props);
  return (
    <DropDownPicker
      {...field}
      {...props}
      value={field.value}
      open={openProvider}
      setOpen={setOpenProvider}
      setValue={(val) => {
        setFieldValue(field.name, val());
      }}
    />
  );
};

export default DropDownFormik;

要使用此组件，只需在表单中指定名称即可：

      <Formik
        initialValues={{ level: ""}}
        onSubmit={(values) => console.log(values)}
      >
        {({ handleChange, handleBlur, handleSubmit, values }) => (
          <View>
            <DropDownFormik
              zIndex={3000}
              name="level"
              placeholder="Notification Level"
              items={notificationLevels}
            />
          </View>
        )}
      </Formik>

Answer 2

您可以使用formik给出的

setFieldValue

方法来达到想要的结果。请看下面的代码。

const [open, setOpen] = useState(false);
  const items = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
  ];

  return (
    <Formik
      initialValues={{ fruits: [] }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleSubmit, values, setFieldValue }) => (
        <View>
          <DropdownPicker
            schema={{ label: 'label', value: 'label' }}
            open={open}
            setOpen={setOpen}
            value={values.fruits}
            setValue={(value) => {
             setFieldValue('fruits', value)
            })
            items={items}
            multiple
          />
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  );
};

我还没有运行此代码并进行验证。但我希望您能够清楚地了解如何使用这个

setFieldValue

来实现您正在寻找的东西。