如何引用动态创建的文本字段(在Formik中)?

时间:2020-02-05 18:59:11

标签: reactjs forms dynamic formik formik-material-ui

我有一个Formik表单,包括一个名为descriptions(初始化为空数组)的初始值,我想在其中存储可能的文本字段结果。

只需更改匹配复选框的值即可临时创建文本字段:用户选中复选框“ X Data”,然后选中该复选框,将呈现一个关联的字段。我正在这部分工作。

我遇到的问题是新渲染的输入未命名!我假设我需要将其命名为descriptions[x_data]。这个对吗?我该如何工作?这是到目前为止我正在使用的代码的精简版本。

const sectionList = [
  {name: "x_data", label: "X Data"}, 
  {name: "y_data", label: "Y Data"}, 
]

...

<div>
  {sectionList.map(({ name, label }, index) => {
    return (
      <div key={index}>
        <Field component={MyCheckbox} name="sectionChoices" value={label} label={label} />
        {values.sectionChoices.indexOf(label) > -1 && (
          <Field
            component={TextField}
            fullWidth
            variant="outlined"
            name={`descriptions[${name}]`}.  // doesn't seem to work :-(
            label={'Description of ' + label}
          />
        )}
     </div>
    )
  })}
</div>

0 个答案:

没有答案