React、Reactstrap - 输入 vs 输入，表单控制 class 阻止值提交，returns 未定义

Question

我正在开发一个基本的 React CRUD 应用程序，我遇到了一个奇怪的问题。使用 Reactstrap 输入组件 或 bootstrap class="form-control" 输入值在提交时未定义。如果我将元素保留为标准 html 输入值，提交就好了吗？我不明白为什么会这样。我整理了这个演示来说明这个问题。

Code Sandbox Snippet <- Live Demo

在 AddName.js 文件中我有一个 Input 和一个 input在提交时，您可以看到名字已提交，但描述没有。

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

谁能解释为什么会这样？有没有可能我如何获得输入的引用？

Answer 1

在使用 3rd 方包之前，您应该通过 React 严格阅读使用 Controlled Components。然后，一旦你理解了流程，就合并包。

我已经重写了您的项目以包括以上所有内容，以及描述我更改的内容和原因的书面说明。我还使用了一些技巧和快捷方式来简化代码，例如：setState callback, ES6 Object Deconstruction and Fat Arrow Functions.

工作示例：https://codesandbox.io/s/l9m0vor4wq

您应该只需要使用 refs 获取 DOM 元素或 class 实例进行 UI 操作，而不是获取数据值。例如，利用 ref 通过使用其 focus() 方法将注意力吸引到 DOM 元素，或通过其 blur() 方法将注意力从元素上移除。在您的情况下，我们只会使用合成 event 而不是 ref.

附带说明一下，在 <PersonCard/> 中使用 name 作为键时要小心，因为多个用户可以共享相同的 name 值。这将导致 React 抱怨两个键相同，如果您尝试删除、求助或过滤名称列表，则会导致问题。为简单起见，我改为使用 map 函数提供的 key 。虽然此方法有效，但它不是最佳解决方案。理想情况下，每个人都应该有一个 id 属性和一个 UUID。这确保您的所有密钥都是唯一的。

React、Reactstrap - 输入 vs 输入，表单控制 class 阻止值提交，returns 未定义

React, Reactstrap - Input vs input, form-control class prevents values from submitting, returns undefined

reactjs

forms

bootstrap-4

reactstrap

form-control