将 children 提供给 Formik select 字段的正确方法

Question

我想构建 multi-step 具有状态保存功能的表单，谢天谢地，我找到了很多这方面的教程。然而，一旦我开始做一些修改和调整，我就有点困惑为什么它不起作用。我想将 select 添加到 form/basic.js 但由于某种原因我收到错误消息：

input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. in input (created by Field)

此外，我正在使用 React Router 来保留数据。那是一个表单的代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Field } from "formik";

class BasicPage extends Component {
  render() {
    return (
      <div>
        <div>
          <Field type="email" name="email" placeholder="Email" />
        </div>
        <div>
          <Field type="text" name="firstName" placeholder="First Name" />
        </div>
        <div>
          <Field type="text" name="lastName" placeholder="Last Name" />
        </div>
        <div>
          <Field name="country" as="select">
            <option value="france">France</option>
            <option value="greece">Greece</option>
            <option value="denmark">Denmark</option>
          </Field>
        </div>
        <Link to="/form/location" className="next">Next</Link>
      </div>
    );
  }
}

export default BasicPage;

完整的 codesandbox 在这里 - https://codesandbox.io/s/tmp-forked-dv66l。可以在“向导”页面看到错误。

Answer 1

Formik 在版本 2 中引入了 <Field as>，您使用的版本 0.11.11.

尝试将版本升级到 2.2.5，您的示例应该可以工作。

https://codesandbox.io/s/tmp-forked-vsz2b?file=/src/index.js

将 children 提供给 Formik select 字段的正确方法

Correct way of providing children into Formik select field

reactjs

formik