javascript - 在 Formik 中设置默认值字段数组

Question

我正在使用Formik构建我的表单。

我的表单有三个文本区域和 1 个选择下拉列表

对于选择下拉列表，我使用了 IssueSelect (作为 Formik 中的 FieldArray)。

和IssueSelect，我用于创建和更新表单。

我的组件如下所示:

const IssueSelect = ({ values }) => (


<FieldArray
    name="issues"
    render={({ remove, insert, push }) => (
      <div>
        {values.issues && values.issues.length > 0 ? (
          values.issues.map((iselected, index) => (
            <div key={uuidv1()}>
              <div>
                <Field
                  value={iselected.id}
                  component="select"
                  name={`issues.${index}`}
                >
                  {issues.map(issue => (
                    <option key={issue.id} value={issue.id}>
                      {issue.name}
                    </option>
                  ))}
                </Field>
              </div>

              <div>
                <button onClick={() => remove(index)}>
                  <b> - </b>
                </button>
                <button onClick={() => insert(index, issues[0].id)}>
                  <b> + </b>
                </button>
              </div>
            </div>
          ))
        ) : (
          <button onClick={() => push(issues[0].id)}>
            <b> + </b> Add new issue
          </button>
        )}
      </div>
    )}
  />
);

export default IssueSelect;

在“创建表单”中，一切正常。

但是更新表单，我将initialValue传递给IssueSelect组件，它正确显示了我传递的数据。但我无法更改选择框中的选项。

我通过传递 value={iselected.id} 设置了默认值当我传递这个 Prop 时，在创建表单中。已经不行了。

您可以检查我的代码和框以准确了解我的意思: https://codesandbox.io/s/rr1o8x3ppq

提前谢谢您。

Answer 1

<Field 
   component="select" 
   name="select" 
   className={'form-control'}
   variant="outlined">

    <option value='one' >One</option>
    <option value='two'>Two</option>
    <option value='three'>Three</option>

</Field>

要设置为默认选项的选项，需要写入第一个选项标签。它将设置为默认选项。它起作用了。