React 中使用 formik 的字段数组

Question

我想像待办事项列表一样关注。就像下面的图片一样。 现在，我的代码的问题是，它的工作方式不同。 我只想要一个呈现 div 列表而不是输入字段的输入。 如下图所示：

请在此处检查我的代码和框

点击此处

     <FieldArray
        name="todos"
        render={(arrayHelpers) => (
          <div>
            {formik.values.todos.map((friend, index) => (
              <div key={index} style={{ display: "flex", gap: "1rem" }}>
                <input
                  name={`todos[${index}].name`}
                  value={formik.values.todos[index].name}
                  onChange={formik.handleChange}
                />
                <button
                  disabled={formik.values.todos?.length === 1}
                  type="button"
                  onClick={() => arrayHelpers.remove(index)}
                  className="deleteButton"
                >
                  Remove
                </button>
              </div>
            ))}
            <button
              type="button"
              onClick={() => arrayHelpers.push({ name: "" })}
            >
              Add
            </button>
          </div>
        )}
      />

Answer 1

这是一个非常简单粗暴的方法 - 我在我的项目中使用了 Formik前一段时间，我很确定它并不完美，但这正是您所需要的。

所以一些细节。

• 不要为列表中的每一项呈现输入，您只需要使用删除处理程序呈现它的值和元素
• ，您只需要一个受控输入，它的值用于 todos< 中的 name 字段/代码>。单击添加按钮时状态将被清除。
• 仅当 formik.values.todos.lenght > 时才需要渲染元素0
• 当 formik.values.todos.lenght === 1 时，您需要禁用 Delete 按钮
• 应该禁用 Add 按钮newValue.lenght === 0

小菜一碟，对吧？