如何将 Formik / React 表单拆分为 table 中的不同列？

Question

我正在学习 ReactJS 并使用 Formik 库进行用户输入。

我一直在尝试设计一个 table，其第一行 (header) 包含显示的每一列的输入字段，但我似乎无法找到分发的方法在自己的列上表示字段。他们都被塞进了 table.

的第一列

<table>
  <thead>
    <tr>
      <th scope="col">
        {/* TODO: Fix this form as it currently loads into a single column */}
        <Formik
          initialValues={hobbyInitialValues}
          onSubmit={SubmitHobby}
          validationSchema={ValidateHobby}
        >
          <Form>
            <Field className="selectField" as="select" name="passion">
              <option value="" label="Select Passion" />
              <option value="Low" label="Low" />
              <option value="Medium" label="Medium" />
              <option value="High" label="High" />
            </Field>
            <Field
              className="inputField"
              id="inputHobbyName"
              name="name"
              placeholder="Enter User Hobby"
            />
            <Field
              className="inputField"
              id="inputYear"
              name="year"
              placeholder="Enter Year"
            />
            <button className="submitButton" type="submit">
              Add
            </button>
          </Form>
        </Formik>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </tbody>
</table>

尝试围绕一个字段内的单个字段会导致此错误，因为 Formik 和 React Tables 都限制了 children 组件可以具有的内容：

Warning: validateDOMNesting(...): <form> cannot appear as a child of <tr>.

怎样才能达到预期的效果？

编辑： 由于 Wraithy 的回答，我的问题得到了解决。现在代码如下：

<Formik
  initialValues={hobbyInitialValues}
  onSubmit={SubmitHobby}
  validationSchema={ValidateHobby}
>
  <Form>
    <table>
      <thead>
        <tr>
          <th scope="col">
            <Field className="selectField" as="select" name="passion">
              <option value="" label="Select Passion" />
              <option value="Low" label="Low" />
              <option value="Medium" label="Medium" />
              <option value="High" label="High" />
            </Field>
          </th>
          <th scope="col">
            <Field
              className="inputField"
              id="inputHobbyName"
              name="name"
              placeholder="Enter User Hobby"
            />
          </th>
          <th scope="col">
            <Field
              className="inputField"
              id="inputYear"
              name="year"
              placeholder="Enter Year"
            />
          </th>
          <th scope="col">
            <button className="submitButton" type="submit">
              Add
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </tbody>
    </table>
  </Form>
</Formik>

Answer 1

您可以将整个 Table 包裹在 <Formik>

中

 <Formik
          initialValues={hobbyInitialValues}
          onSubmit={SubmitHobby}
          validationSchema={ValidateHobby}
        >
<table>
<!-- table with more columns go there -->
</table>
</Formik>

如何将 Formik / React 表单拆分为 table 中的不同列？

How to split a Formik / React form into different columns in a table?

node.js

reactjs

formik