Различные входы с общим именем в форме React Hook

Снимок экрана ниже содержит список элементов и страницу для выбранного элемента.

Когда я нажимаю на любой элемент в Списке, Страница обновляется.

Объект состоит из идентификатора, полного имени и имени пользователя.

Внутри страницы есть текстовый ввод с именем пользователя для всех элементов. Проблема в том, что ввод текста не меняется, когда я выбираю другой элемент. Я хочу иметь разные текстовые поля для разных элементов. Как мы справляемся с этим в форме React Hook?

введите описание изображения здесь

Ссылка на проект: https://codesandbox.io/s/busy-smoke-7zgew


reactjs forms react-hooks react-hook-form
person Bexultan Myrzatayev    schedule 30.06.2020    source источник
comment
вы можете предоставить кодовый ящик?   -  person Bill    schedule 30.06.2020
comment
@Bill, я добавил ссылку на проект. Пожалуйста, взгляните!   -  person Bexultan Myrzatayev    schedule 01.07.2020
comment
Я думаю, что в тот момент, когда вы щелкнете по списку, вам нужно использовать setValue для обновления ввода. react-hook-form.com/api#setValue   -  person Bill    schedule 01.07.2020
comment
@ Билл, это сработало. Я добавил useEffect, чтобы вызвать изменение идентификатора. Это решение, ориентированное на производительность?   -  person Bexultan Myrzatayev    schedule 01.07.2020
comment
да. он не должен запускать повторный рендеринг, если ваш ввод зарегистрирован через ref.   -  person Bill    schedule 01.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Добавление этого на страницу решило проблему.

useEffect(() => {
  setValue("username", profile.username);
}, [id]);
person Bexultan Myrzatayev    schedule 01.07.2020