Material-UI 表格标签中的 Formik

Question

我正在尝试创建一个材质 UI 表，其中每个单元格都是 Formik 输入。 不幸的是，当 Formik 对象是 TableBody 标签或 TableItem 标签的子对象时，Material UI 会引发错误。

例如：输入表

这就是示例所具有的，没有 Formik：

 {rows.map(row => (
        <TableRow key={row.id}>
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
          <TableCell align="right"></TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))} 

这就是我所拥有的，但它不起作用：

<TableBody>
        <TableRow>
          <Formik
            initialValues={{tasks: [
              {
                name: "Build a table w/ Formik",
                company: "Alchemy",
                monday: "2",
                tuesday: "1.2",
                wednesday: "3.2",
                thursday: "0",
                friday: "0",
              },
              {
                name: "Build something else",
                company: "Alchemy",
                monday: "2",
                tuesday: "0",
                wednesday: "0",
                thursday: "0",
                friday: "0",
              }
            ]}}
            onSubmit={values =>
              setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              }, 500) }
            render={({values}) => (
              <Form>
                <FieldArray
                  name="tasks"
                  render={arrayHelpers => (
                    <div>
                      {values.tasks && values.tasks.length > 0 ? (
                        values.tasks.map((task, index) => (
                          <TableRow key={index}>
                            <TableCell component="th" scope="row">
                              <TextField
                                name={`tasks`}
                                className={classes.textField}
                              />
                            </TableCell>
                          </TableRow>
                        ))
                      ) : null}
                    </div>
                  )}
                />
              </Form>
            )}
          />
        </TableRow>
      </TableBody>

它创建一个表并识别出数组中有两个任务，但不显示输入字段。

Answer 1

我推荐react-hook-form并使用component="form"

<TableRow
    component="form"
    noValidate
    autoComplete="off"
    onSubmit={handleSubmit(data => console.log(data))}
>

Answer 2

使用 useFormik() 钩子。 有了它，你可以做类似..

const formik = useFormik(){
  initialValues:[],
  onSubmit: (v) => {}
  etc...
}

通过这种方式，Formik 不会成为 tablebody 标签的孩子！