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

Question

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

代码沙箱摘要 <-实时演示

在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对象解构和Fat Arrow函数 。

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

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

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