在将表单元素上的onChange事件委托给React中的每个子元素时收到警告

时间:2018-10-12 05:59:58

标签: javascript reactjs

我正在学习React并尝试构建一个Form组件来提交数据,我以表单中的handling multiple inputs引用了react官方文档。

从示例代码中可以看到,它在每个输入元素上定义了onChange={this.handleInputChange},我试图将onChange事件提升到form元素本身,就像{{1} }并从每个输入元素中删除它们,然后基于<form onChange={this.handleInputChange} >事件可以冒泡的情况下,它可以很好地工作。

但是我想知道这种方式是否有副作用,因为在Internet上搜索时我没有看到太多这样的代码,而且大多数关于React形式的文章在React的文档中都使用相同的方式。

更新:
我根据以下React网站的示例创建了一个MyForm组件, https://codepen.io/Lenient/pen/PyLwxp?editors=0010
请注意,我将change事件放入了form元素。如果您打开开发人员工具,您会在控制台中看到两条警告消息。这是消息之一。

  

警告:道具类型失败:您向没有onChange处理程序的表单字段提供了value道具。这将呈现一个只读字段。如果该字段是可变的,请使用onChange。否则,请设置defaultValueonChange

我不太清楚,任何人都可以举个例子来帮助我理解它吗?

0 个答案:

没有答案