Formik - 名称和 ID 未传递到字段答案

【问题标题】：Formik - name and ID are not being passed to FieldFormik - 名称和 ID 未传递到字段
【发布时间】：2021-08-09 08:23:29
【问题描述】：

我有一个像下面这样的组件，当我传递 name prop 或 ID 时，它没有被传递给组件，我可以同时检查两个单选按钮。另外，如何使用选中的单选按钮的值更新初始值中的预定义字段？

在 React Devtools 中看起来没问题

我收到以下错误

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:

import React from "react";
import { Heading, OptionCard } from "../..";
import data from "../../../../lang/pl.json";
import { Field } from "formik";

export const Step1 = ({
    errors,
    touched,
    values,
    handleChange,
    handleBlur,
    handleSubmit
}) => {
    console.log(values, errors, touched);
    return (
        <>
            <div className="bottomSeparator mb-4">
                <Heading variant="h3">{data["global.offer-details"]}</Heading>
            </div>
            <Heading variant="h5" bsClasses="my-1" info>
                {data["global.category-offer"]}
            </Heading>
            <div className="row">
                <div role="group" className="col-12">
                    <div className="col-xs-6 col-lg-3">
                        <Field
                            type="radio"
                            component={OptionCard}
                            value={data["create.blade.text-1"]}
                            name={values.kategoria}
                            onChange={handleChange}
                            id={data["create.blade.text-1"]}
                            name={data["create.blade.text-1"]}
                        />
                    </div>
                    <div className="col-xs-6 col-lg-3">
                        <Field
                            type="radio"
                            component={OptionCard}
                            value={data["create.blade.text-2"]}
                            name={values.kategoria}
                            onChange={handleChange}
                            id={data["create.blade.text-2"]}
                            name={data["create.blade.text-2"]}
                        />
                    </div>
                </div>
                <div className="row mb-3">
                    <div className="col-md-12 col-sm-12 col-xs-12">
                        <div className="form-group">
                            <label>
                                {data["global.category-offer"]}{" "}
                                <span className="red">
                                    {data["global.required"]}
                                </span>
                            </label>
                            <select
                                id="type"
                                name="type"
                                className="d-block"
                                required="yes"
                            >
                                <option value="course">
                                    {data["create.blade.text-1"]}
                                </option>
                                <option value="private_lesson">
                                    {data["create.blade.text-2"]}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

谢谢

【问题讨论】：

如果没有适当的数据，我们无法调查此问题。你可以创建一个stackblitz代码并将其包含在此处吗？

标签： reactjs forms formik

【解决方案1】：

你有values formik 变量。您将名称定义为name={values.kategoria}（示例）。当页面呈现时，name={values.kategoria} 等于 ""。

你还加倍了 name 属性，在你导入它时总是根据你的 data 变量，就像你在这里做的 name={data["create.blade.text-1"]}

也是一件好事：

您定义initialValues 并将您的data 分配给您的initialValues。之后，您在渲染组件中使用{values} 变量，例如here：

【讨论】：