使用 formik 在 React 中的字段数组

Question

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

请在这里查看我的codesandbox

     <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

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

所以一些细节。

不要为列表中的每个项目呈现输入，您只需呈现它的值和带有删除处理程序的元素
您只需要一个受控输入，它的值用于 todos 中的 name 字段。单击 Add 按钮时状态被清除。
仅当 formik.values.todos.lenght > 0
当 formik.values.todos.lenght === 1

Delete

Add 按钮应在 newValue.lenght === 0

一块蛋糕，对吧？

使用 formik 在 React 中的字段数组

Field Array in React using formik

reactjs

styled-components

formik

react-hooks