Material-UI 表格标签中的 Formik

Posted 2023-02-22

【中文标题】Material-UI 表格标签中的 Formik

【英文标题】：Formik within Material-UI table tags

【发布时间】：2019-07-19 05:37:17

【问题描述】：

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

例如： Table of Inputs

这就是示例所具有的，没有 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>

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

【问题讨论】：

您的 html 无效，请参阅：***.com/questions/5967564/form-inside-a-table

当我将所有表格元素放在 formik 标签内时，它就可以工作了！谢谢。

【参考方案1】：

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

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