无法使用 formik 更改 material-ui 中的文本字段值

Question

我有下面的代码，我在 formik 字段数组中使用 material-ui 文本字段 API 设置默认值：

<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 初始状态值，但无济于事。

似乎无法更新值。

不确定我做错了什么？

Answer 1

在这里，您正在将硬编码字符串传递给 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

无法使用 formik 更改 material-ui 中的文本字段值

Unable to change my textfield value in material-ui with formik

javascript

reactjs

material-ui

formik