React，Reactstrap - 输入与输入，表单控制类阻止值提交，返回未定义

Posted 2023-03-23

【中文标题】React，Reactstrap - 输入与输入，表单控制类阻止值提交，返回未定义

【英文标题】：React, Reactstrap - Input vs input, form-control class prevents values from submitting, returns undefined

【发布时间】：2019-06-13 20:22:36

【问题描述】：

我正在开发一个基本的 React CRUD 应用程序，但遇到了一个奇怪的问题。 使用 Reactstrap 输入组件 或引导 class="form-control" 输入值未定义 onSubmit。 如果我将元素保留为标准 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>

谁能解释为什么会这样？我有可能在输入上有参考吗？

【参考方案1】：

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

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

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

您应该只需要使用refs 来获取DOM 元素或用于UI 操作的类实例，而不是获取数据值。例如，通过ref 方法使用ref 来引起对DOM 元素的注意，或者通过blur() 方法从其上移除注意力。在您的情况下，我们只会使用合成的 event 而不是参考。

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

【讨论】：

感谢@matt 的精彩解释。我是 React 新手，有很多东西要学习。我对使用 youtube 教程中看到的 refs 持怀疑态度。 event.target 更加熟悉，现在我发现它更有意义了。

您能否解释一下，假设我使用 id 作为 key prop，我将如何创建 Update 和 Delete 方法？

这对你自己来说应该是一个很好的挑战。也就是说，如果您使用的是唯一 ID，那将是一个挑战。试一试。如果您遇到困难，请通过代码框向我展示您尝试过的内容，我可以提供一些反馈。