Formik 收音机不适用于嵌套对象值

Posted 2023-03-07

【中文标题】Formik 收音机不适用于嵌套对象值

【英文标题】：Formik radio not working with nested object values

【发布时间】：2020-12-21 01:54:20

【问题描述】：

我正在使用 Formik。当我尝试使用嵌套对象为我的初始值渲染单选按钮时，根据他们在此处的文档：https://formik.org/docs/guides/arrays 我的单选按钮无法被选中。

这里的沙盒：https://codesandbox.io/s/gracious-sanderson-8g3ls?file=/src/App.js:0-1046

我的代码：

import React from "react";
import  Field, Formik, Form  from "formik";
import  ReactstrapRadio  from "reactstrap-formik";

import  Col, Row, Container  from "reactstrap";

export const App = () => 
  return (
    <>
      <Formik
        initialValues=
          name: 
            test: "testValue"
          
        
      >
        () => (
          <Container>
            <Form>
              <Row>
                <Col>
                  <Field
                    label="Test 1"
                    type="radio"
                    value="testValue"
                    name="name.test"
                    component=ReactstrapRadio
                  />
                  <Field
                    label="Test2"
                    type="radio"
                    value="otherValue"
                    name="name.test"
                    component=ReactstrapRadio
                  />
                </Col>
              </Row>
            </Form>
          </Container>
        )
      </Formik>
    </>
  );
;

对其他输入类型（如文本）使用点表示法似乎可以正常工作。

【参考方案1】：

我的猜测是它的逻辑很好，但是视觉部分有问题，ReactstrapRadio 样式可能存在问题，我分叉了你的沙箱并摆脱了 ReactstrapRadio 并且它工作正常，你可以在这里查看 https://codesandbox.io/s/naughty-christian-xhhdx?file=/src/App.js