如何通过单击 ReactJs 的按钮来呈现 DIV 元素

Question

我正在处理一个表单，当按下添加更多按钮时，我想在“活动成员”部分呈现相同的 div。 用户可以有多个 Active 成员，因此每次用户按下按钮时都会呈现相同的输入部分。 我猜 for 循环可以提供帮助，但它在 jsx 代码库中不起作用。 我正在使用 formik 来创建表单。

Answer 1

您可以使用<FieldArray />轻松实现。

<FieldArray /> 是一个有助于常见数组/列表操作的组件。 您将 name 属性与包含相关数组的值中的键的路径一起传递给它。

资源 - 官方文档（ https://formik.org/docs/api/fieldarray ）

import { Formik, Form, Field, FieldArray } from "formik";
import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Friend List</h1>
      <Formik initialValues={{ memberships: [] }}> {/* Initialize a membership empty array*/}
        {(props) => (
          <Form>
            <FieldArray name="memberships">
              {({ push, form: { values } }) => (
                <div>
                  {values.memberships &&
                    values.memberships.length > 0 &&
                    values.memberships.map((item, index) => (
                      <div key={index}>
                        <Field
                          name={`memberships.${index}.name`}
                          placeholder="Membership Title"
                        />
                        <Field
                          name={`memberships.${index}.position`}
                          placeholder="Position"
                        />
                        <Field
                          name={`memberships.${index}.join.date`}
                          placeholder="Join Date"
                        />
                      </div> {/* Active Membership section */}
                    ))}
                  <button type="button" onClick={() => push({})}> {/* Create the click handler */}
                    Add More
                  </button>
                </div>
              )}
            </FieldArray>
          </Form>
        )}
      </Formik>
    </div>
  );
}

https://codesandbox.io/s/formik-add-more-ncsw3?file=/src/App.js

如果您需要进一步的支持，请告诉我。