пытаюсь создать форму регистрации. Не могу понять как поместить массив с объектами в форму, использую библиотеку react-hook-form. Как пример это добавление меток в раздел "Метки" при отправки вопроса на stackoverlfow. Большое спасибо
2 ответа
В целом можно использовать 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'],
};
Возможно вам поможет хук отвечающий за добавление массива в форму https://react-hook-form.com/api/usefieldarray
-
пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 21 мая 2022 в 15:43
-
я видел как с помощью него создаются массив инпутов, а мне нужен массив строк 21 мая 2022 в 15:54