Блог

Главная - Вопросы по программированию - Как визуализировать элемент DIV нажатием кнопки на ReactJS

Как визуализировать элемент DIV нажатием кнопки на ReactJS

#javascript #reactjs #react-hooks #formik

Вопрос:

Я работал над формой , и я хочу отобразить тот же div в разделе «Активное членство», когда нажата кнопка «Добавить еще». Пользователь может иметь несколько активных участников, поэтому каждый раз, когда пользователь нажимает кнопку, отображается один и тот же раздел ввода. Я думаю, что цикл for может помочь, но он не работает внутри кодовой базы jsx. Я использую formik для создания формы.
введите описание изображения здесь

Комментарии:

1. Поскольку вы используете Formik, вам следует рассмотреть возможность использования formik.org/docs/api/fieldarray для этого случая .

Ответ №1:

Вы можете легко реализовать это с помощью <FieldArray /> .

<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 amp;amp;
                    values.memberships.length > 0 amp;amp;
                    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

Дайте мне знать, если вам понадобится дополнительная поддержка.

Метки: