React, Reactstrap — ввод против ввода, класс управления формой предотвращает отправку значений, возвращает undefined

Я работаю над базовым приложением React CRUD и столкнулся со странной проблемой. При использовании компонента ввода Reactstrap или начальной загрузки class="form-control" входные значения не определены при отправке. Если я оставлю элементы в качестве стандартного ввода html, значения отправятся нормально? Я не могу понять, почему это происходит. Я собрал эту демонстрацию, которая иллюстрирует проблему.

Фрагмент песочницы кода ‹– Демонстрация

В файле AddName.js у меня есть один ввод и один вход при отправке, вы можете видеть, что первое имя отправляется, а описание — нет.

<FormGroup>
  <input
    placeholder="First Name"
    ref={nameInput => (this.nameInput = nameInput)}
  />
</FormGroup>
<FormGroup>
  <Input
    placeholder="Description"
    ref={descriptionInput => (this.descriptionInput = descriptionInput)}
  />
</FormGroup>

Кто-нибудь может объяснить, почему это происходит? Возможно ли, как у меня есть рефы на входах?


reactjs forms bootstrap-4 reactstrap form-control
person Mike    schedule 20.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прежде чем использовать сторонние пакеты, вы должны прочитать об использовании управляемых компонентов строго через React. . Затем, как только вы поймете поток, включите пакеты.

Я переписал ваш проект, включив в него все вышеперечисленное, а также письменные заметки с описанием того, что я изменил и почему. Есть также несколько приемов и сокращений, которые я использовал для упрощения кода, например: обратный вызов setState, деконструкция объекта ES6 и Функции толстой стрелки.

Рабочий пример: https://codesandbox.io/s/l9m0vor4wq.

Вам нужно использовать refs только для получения элемента DOM или экземпляра класса для манипулирования пользовательским интерфейсом вместо получения значения данных. Например, использование ref для привлечения внимания к элементу DOM с помощью его метода focus() или отвлечение внимания от него с помощью его метода blur(). В вашем случае мы бы использовали только синтетический event вместо реф.

Кстати, будьте осторожны при использовании name в качестве ключа в <PersonCard/>, потому что несколько пользователей могут использовать одно и то же значение name. Это приведет к тому, что React будет жаловаться на то, что два ключа одинаковы, и вызовет проблемы, если вы когда-либо попытаетесь удалить, использовать или отфильтровать список имен. Для простоты я вместо этого использовал key, предоставляемый функцией карты. Хотя этот подход работает, это не лучшее решение. В идеале у каждого человека должно быть свойство id с UUID. Это гарантирует, что все ваши ключи будут уникальными.

person Matt Carlotta    schedule 20.01.2019
comment
Спасибо @matt за отличное объяснение. Я новичок в React, и мне нужно многое понять. Я с подозрением относился к использованию ссылок, которые можно увидеть в учебнике на YouTube. event.target гораздо более знаком, и теперь, когда я вижу, это имеет гораздо больше смысла. - person Mike; 20.01.2019
comment
Можете ли вы также объяснить, как мне создать методы для обновления и удаления, предполагая, что я использую идентификатор для реквизита ключа? - person Mike; 21.01.2019
comment
Это должно быть хорошим испытанием для вас, чтобы справиться самостоятельно. Тем не менее, если вы используете уникальный идентификатор, это будет просто проблемой. Дать ему шанс. Если вы застряли, покажите мне через codeandbox, что вы пробовали, и я могу оставить отзыв. - person Matt Carlotta; 21.01.2019