0

пытаюсь создать форму регистрации. Не могу понять как поместить массив с объектами в форму, использую библиотеку react-hook-form. Как пример это добавление меток в раздел "Метки" при отправки вопроса на stackoverlfow. Большое спасибо"Инструменты" это ключ а выпадающий список с добавленными инструментыми это массив с объектами (id: value)

2 ответа 2

1

В целом можно использовать useFieldArray. Может показать что с помощью него можно только создать массив из инпутов, но его в том числе можно использовать для плоских значений типа строки или числа. Полный пример как это сделать я привёл здесь

https://codesandbox.io/s/tags-field-array-g9zfie?file=/src/App.js

Вам нужно только изменить стили под себя.

И так, как же это работает? В первую очередь создадим нашу форму:

  const { control, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "tags"
  });

useFieldArray будем использоваться для хранения и удаления тэгов, определим также методы для этих действий:

  const addTag = () => {
    append(tag);
    setTag("");
  };

  const removeTag = (index) => () => {
    remove(index);
  };

Как видишь я использую здесь состояние tag для добавления тэга, его я определил чуть ранее:

  const [tag, setTag] = useState("");

Теперь чтобы добавить новый тэг нам нужно его сначала ввести:

      <input placeholder="Enter tag..." value={tag} onChange={onChangeTag} />
      <button type="button" onClick={addTag}>
        Add Tag
      </button>

Каждый раз как мы будем вводить тэг и нажимать кнопку добавить мы будем добавлять новый тэг в нашу форму в качестве массива, теперь его можно и отрендерить:

      {fields.map((item, index) => (
        <Fragment key={item.id}>
          <Controller
            render={({ field }) => <p>{field.value}</p>}
            name={`tags[${index}]`}
            control={control}
          />
          <button type="button" onClick={removeTag(index)}>
            Remove
          </button>
          <br />
        </Fragment>
      ))}

Как видишь я использую Controller для рендера значения, обычно он используется чтобы указать свой собюственный инпут в том числе и дял редактирования значения формы, но в данном случае нам это ни к чему, но ты легко можешь добавить интересующую тебя логику. Для рендера ты можешь использолвать и getValues метод из хука вместо использованяи контролера. Обрати так внимание как я указываю name для формы tags[${index}], в примере ты видел что мы также можем указать вложенность и обычно используется обьект в качестве значения элемента из field array, но как я и сказал мы без проблем можем указать плоское значение.

Теперь мы можем нажать submit кнопку и увидеть результат:

{
    tags: ['react', 'js', 'react-native', 'typescript'],
};
0

Возможно вам поможет хук отвечающий за добавление массива в форму https://react-hook-form.com/api/usefieldarray

2
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 21 мая 2022 в 15:43
  • я видел как с помощью него создаются массив инпутов, а мне нужен массив строк 21 мая 2022 в 15:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.