Formik в тегах таблиц Material-UI - PullRequest
Новая
       14

Formik в тегах таблиц Material-UI

0 голосов
/ 25 февраля 2019

Я пытаюсь создать таблицу пользовательского интерфейса материала, где каждая ячейка является входом Formik.К сожалению, пользовательский интерфейс Material генерирует ошибки, когда объект Formik является дочерним по отношению к тегу TableBody или тегу TableItem.

Например: Таблица входов

Это то, что есть в примере, без 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>

Создает таблицу и распознает, что в массиве есть две задачи, но не отображает поля ввода.

...