时间戳

首页 > 解决方案 > 将孩子提供到 Formik 选择字段的正确方法

reactjs - 将孩子提供到 Formik 选择字段的正确方法

问题描述

我想构建带有状态保存的多步骤表单，幸运的是我找到了很多教程。但是，一旦我开始进行一些修改和调整，我就有点困惑为什么它不起作用。我想将 select 添加到 form/basic.js 但由于某种原因我收到错误：

input 是一个 void 元素标签，既不能拥有children也不能使用 dangerouslySetInnerHTML. 在输入中（由字段创建）

此外，我正在使用 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;

整个代码框都在这里 - https://codesandbox.io/s/tmp-forked-dv66l。错误可以在“向导”页面中看到。

标签： reactjsformik

解决方案

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

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

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

推荐阅读