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

Question

我正在学习 React 并尝试构建一个表单组件来提交数据，我参考了 react 官方文档来处理表单中的多个输入。

正如您从示例代码中看到的那样，它定义了onChange={this.handleInputChange}每个输入元素，我尝试将onChange事件提升到form元素本身<form onChange={this.handleInputChange} >，并从每个输入元素中删除它们，然后根据change可以冒泡的事件运行良好。

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

更新：
我基于下面的 React 站点示例创建了一个 MyForm 组件， https:
//codepen.io/Lenient/pen/PyLwxp?editors=0010 请注意我将onChange事件放入表单元素。如果您打开开发者工具，您可以在控制台中看到两条警告消息。这是其中一条消息。

警告：失败的道具类型：您在value没有处理程序的情况下为表单字段提供了道具onChange。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue. 否则，设置onChange或readOnly。

我不是很清楚，任何人都可以举一个例子来帮助我理解它吗？

标签： javascriptreactjs