Невозможно изменить значение моего текстового поля в material-ui с помощью formik

ArthurJ

9 августа 2021 в 02:59

268

У меня есть приведенный ниже код, в котором я устанавливаю значение по умолчанию, используя API текстового поля material-ui в массиве полей formik:

<TextField
   name={`myGroups.${index}.myGroupName`}
   value={`Group ${index+1}`}
   label="Group"
   InputProps={{ style: { backgroundColor: "white" }}}
   autoComplete="off"
   onChange={(e) => setFieldValue(`myGroups.${index}.myGroupName`, e.target.value)}
/>

К сожалению, с приведенным выше кодом я вообще не могу изменить значение этого текстового поля. Кажется, он доступен только для чтения.

Я добавил вызов onChange для обновления значений начальных состояний Formik, но безрезультатно.

Просто не могу обновить значение.

Не знаю, что я делаю не так?

Источник

Поделиться Скопировать ссылку Скопировано

Jabal Logian

9 августа 2021 в 03:40

Я нашел рабочий учебник с использованием материала ui + formik здесь youtube.com/watch?v=wAvkbSYdyRU

Ответы (1)

diaz

9 августа 2021 в 03:27

Здесь вы передаете жестко закодированную строку в values. Вы должны сопоставить соответствующее значение каждого поля.

<TextField
  name={`myGroups.${index}.myGroupName`}
  value={values.myGroups[index].myGroupName}
  label="Group"
  InputProps={{ style: { backgroundColor: "white" } }}
  autoComplete="off"
  onChange={handleChange}
/>

Пожалуйста, ознакомьтесь с кодами и полем: https://codesandbox.io/s/friendly-archimedes-85quw?file=/src/App.js:339-392

Поделиться Скопировать ссылку Скопировано

ArthurJ

9 августа 2021 в 04:06

Я посмотрю, но вся идея заключается в том, что мне нужно установить для этого поля значение по умолчанию Group ${index+1} — Группа 1, а когда пользователь нажимает кнопку Add Group, тогда новое поле по умолчанию равно Group ${index+1} — Группа 2 и т. д., в в то же время, позволяя пользователю перезаписать это значение по умолчанию.

ArthurJ

9 августа 2021 в 04:21

При ближайшем рассмотрении все выглядит нормально, но есть ли способ добавить значение [index] в конец value={values.myGroups[index].myGroupName}, чтобы я получил группу 1, группу 2 и т. д.?

diaz

9 августа 2021 в 04:26

Да, вы можете использовать для этого строку шаблона: js value={`$values.myGroups[index].myGroupName} ${index+1}`}

diaz

9 августа 2021 в 04:28

Для установки значения по умолчанию или начального значения для полей вы можете использовать mapPropsToValues файла Formik.

ArthurJ

9 августа 2021 в 04:34

Я пробовал value={${values.myGroups[index].myGroupName} ${index+1}}, но когда я нажимаю клавишу возврата, в поле происходят странные вещи - всегда появляется число 1. Пожалуйста, попробуйте свои коды и коробку. Также новичок в Formik и не знает, как использовать mapPropsToValues.

ArthurJ

9 августа 2021 в 04:55

Любые идеи, пожалуйста, о проблеме с клавишей Backspace?

diaz

9 августа 2021 в 05:06

Я обновил песочницу. Пожалуйста, посмотрите. Что касается начальных значений/значений по умолчанию, вы можете использовать либо initialValues компонента оболочки <Formik>. Или, если вы используете оболочку withFormik, вы можете использовать mapPropsToValues. Вы можете получить более подробную информацию о них в документации formik.

ArthurJ

9 августа 2021 в 06:37

Оцените обновление. Напомню, на моем экране первая группа уже представлена пользователю, т. е. Group 1 уже видна до того, как пользователь нажмет кнопку Add Group, и, к сожалению, я не уверен, смогу ли я использовать myGroupName: Группа ${values.myGroups.length + 1}`. Есть ли возможность изменить свою песочницу, чтобы приспособиться к моему сценарию? Спасибо.

diaz

9 августа 2021 в 15:53

Вы можете сделать это, обновив начальные значения. mapPropsToValues: () => ({ myGroups: [{ myGroupName: "Group 1" }] })

ArthurJ

1 сентября 2021 в 03:01

просто интересно, можете ли вы взглянуть на этот новый поток SO re: что-то похожее на этот запрос: coderhelper.com/questions/69007279/…