Переключатель React- bootstrap не отображается

Question

Я пытаюсь включить Formik и React- bootstrap.

Идет, как и ожидалось, за исключением компонента переключателя.

Вот моя функция для рендеринга переключателя:

function ReactSwitch(props){
    return(
        <>
            <Col md={props.col}>
                <Form.Group>
                    <Form.Check 
                        type="switch"
                        id={props.id}
                        name={props.name}
                        label={props.label}
                        checked={props.checked}
                        onChange={props.onChange}
                    />
                </Form.Group>
            </Col>
        </>
    );
}

И вот моя инициализация для Formik:

const formik = useFormik({
        initialValues: {
          wflow_switch: false
        },
        onSubmit: values => {
          alert(JSON.stringify(values, null, 2));
        },
});

Обратите внимание, что когда я меняю тип с переключателя на флажок, он отображает флажок, но все еще без метки. Что я делаю неправильно? Я все еще изучаю React, поэтому любые комментарии приветствуются.

Answer 1

Полагаю, вам нужно будет использовать state и включить enablereinitialize

Попробуйте:

export default function FormSwitch() {
  // add checked state
  const [checked, setChecked] = useState(false)

  const { handleSubmit, values } = useFormik({
    initialValues: {
      // initial value is set 'false' by state 
      switch: checked
    },
    // Control whether Formik should reset the form if initialValues changes
    enableReinitialize: true,
    onSubmit: (values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2))
        setSubmitting(false)
      }, 400)
    }
  })
  return (
    <form className="form" onSubmit={handleSubmit}>
      <ReactSwitch
        name="switch"
        label="Switch"
        id="switch"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <button type="submit">
        Submit
      </button>
    </form>
  )
}

---

Редактировать: Другой подход с использованием useField с <Formik>

import { Formik, useField } from "formik"
import { Col, Form } from "react-bootstrap"

const ReactSwitch = ({ ...props }) => {
  const [field, form] = useField(props)

  return (
    <Col md={props.col}>
      <Form.Group>
        <Form.Check
          type="switch"
          id={props.id}
          checked={field.value.checked}
          onChange={() => form.setFieldValue(props.name, !field.value)}
          {...field}
          {...props}
        />
      </Form.Group>
    </Col>
  )
}

export default function Switch() {
  return (
    <Formik
      initialValues={{
        switch: false
      }}
      onSubmit={values => alert(JSON.stringify(values, null, 2))}
    >
      {formik => (
        <form onSubmit={formik.handleSubmit}>
          <ReactSwitch label="Switch" name="switch" id="switch" />
          <button type="submit">submit</button>
        </form>
      )}
    </Formik>
  )
}