React报错 You provided a `value` prop to a form fiel

ivydom 发布于2019-08-23 14:57 / 2821人阅读

摘要：报错内容原因原因是因为标签，没有定义但是提供了属性。会抛出警告，并将元素设置为只读。如果目标是只读字段，最好使用属性明确加以定义。这不仅会消除警告，也会确保代码的可读性。解决可以添加，或者直接添加属性，而不设置值，会默认将该属性的值设为。

报错内容

Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. 
This will render a read-only field. If the field should be mutable use `defaultValue`. 
Otherwise, set either `onChange` or `readOnly`.

原因

原因是因为input标签，没有定义onChange 但是提供了value属性。React会抛出警告，并将元素设置为只读。

如果目标是只读字段，最好使用readOnly属性明确加以定义。这不仅会消除警告，也会确保代码的可读性。

解决：

可以添加readOnly={true} ，或者直接添加readOnly属性，而不设置值，React会默认将该属性的值设为true。

超融合服务器私有云 attribute!value 阿里云to asp for to prop()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101405.html

React系列 --- createElement, ReactElement与Component部

摘要：仅针对数据属性描述有效获取该属性的访问器函数。当且仅当指定对象的属性可以被枚举出时，为。冻结及其对象主要目的是为提高测试环境下效率，将的一些属性配置为不可枚举，进行遍历的时候跳过这些属性。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom diff算法实现分析(三)React...

xuhong 2019-08-26 10:37 评论0 收藏0
React官网的RECENT POSTS阅读

摘要：事件行为在浏览器中保持一次，并且符合标准。主要是进行修复。事件已经在移动上支持。阻止已经在上存在的事件错误处理。然后对应的将会被打包送往客户端。在中弃用，现在正式删除。是运行于一个严格的安全策略下成为可能。增加警告提示非生产环境。 ⭐️写在开头阅读React官网的 RECENT POSTS的个人翻译/摘要(部分)。英文片段为官网原文片段。原文地址 ⭐️为什么要使用React ...

Sike 2019-08-21 15:33 评论0 收藏0
React

摘要：语法是一种语法的拓展语言，在中官方也推荐使用描述用户界面，使用起来会比较快捷而且易读不是一门新的语言，可以理解为是一种语法糖，作用就是能够让我们更加直观的在中创建标签，最终还是会被编译为语法，例如我们看一段代码上面的语法最终会被编译为语法， Reatc JSX语法 jsx是一种JavaScript语法的拓展语言，在React中官方也推荐使用jsx描述用户界面，使用起来会比较快捷而且易读...

techstay 2019-08-23 11:40 评论0 收藏0
React手稿之类型检查

摘要：类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用或者来实现。示例以上内容在实现一个通用组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。 Typechecking With PropTypes 类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。 React提供了PropTypes来检查类型。示例： imp...

tomorrowwu 2019-08-26 12:24 评论0 收藏0
React源码解析之React.createContext()

摘要：我们只希望最多有两个并发渲染器主要和次要主要和次要。辅助渲染器将自己的的存储在单独的字段中。 showImg(https://segmentfault.com/img/remote/1460000019911593); 前言：由于childContext在React17中会被废弃，所以不去分析它了，主要是新 API— —createContext()的讲解一、React.create...

booster 2019-08-26 10:26 评论0 收藏0