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，所以感谢任何 cmets。

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>
  )
}