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

Question

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

Фрагмент кода песочницы <- демоверсия в реальном времени </a>

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

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

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

Answer 1

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

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

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

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

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