Question

我正在开发一个基本的React CRUD App，但遇到了一个奇怪的问题。使用 Reactstrap输入组件或引导程序 class =“ form-control” ，在Submit上输入值是未定义的。如果我将元素保留为标准html输入，则提交值就好了吗？我不知道为什么会这样。我整理了这个演示此问题的演示。

Code Sandbox Snippet <- Live Demo

在 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阅读使用Controlled Components。然后，一旦您了解了流程，请合并这些软件包。

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

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

您只需要使用refs来获取用于UI操作的DOM元素或类实例，而不是获取数据值。例如，通过使用ref方法来利用focus()来吸引对DOM元素的关注，或者通过blur()方法来消除对DOM元素的关注。在您的情况下，我们只会使用人工合成的event而不是引用。

另一方面，请小心使用name作为<PersonCard/>中的键，因为多个用户可以共享相同的name值。这将导致React抱怨两个键相同，并且如果您尝试删除，重新排序或过滤名称列表，则会导致问题。为简单起见，我改用了map函数提供的key。尽管此方法有效，但这不是最佳解决方案。理想情况下，每个人都应拥有一个UUID的id属性。这样可以确保您所有的键都是唯一的。

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

1 个答案: