只读字段是如何在React中实现的？
我将这个SSCCE放在一起测试使用ReactJS创建的表单中的只读字段，而不是普通的HTML和字段(也是在小提琴中)：
<!doctype html>
<html>
<head>
<title>comparing ReactJS and simple HTML forms</title>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
</head>
<body>
<div>
<h3>HTML form</h3>
<form>
<input type='text' value='your name'/>
</form>
</div>
<div>
<h3>form created with ReactJS</h3>
<div id='reactForm'>
</div>
</div>
<script type='text/javascript'>
var rce = React.createElement.bind(React);
var SillyReactForm = React.createClass({
render: function() {
return rce('form', {}
, rce('input', { type: 'text', value:'your name'}));
}});
var form = rce(SillyReactForm, {});
ReactDOM.render(form, document.getElementById('reactForm'));
</script>
</body>
</html>当然，使用ReactJS创建的字段是只读的，实际上，我在控制台中也看到了这条消息：
Warning: Failed form propType: 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`.我的问题是，这是如何由ReactJS as强制执行的，它检查了普通的HTML和ReactJS生成的DOM元素之间没有本质的区别：
ReactJS是否正在执行一些设置该字段为有效只读的幕后JavaScript？如果是这样的话，我如何才能发现这种与DOM元素相关的逻辑呢？这是否违背了ReactJS是一个库而不是一个框架的观点(因此更透明，更易于推理？)
回答 1
Stack Overflow用户
发布于 2016-03-04 11:29:04
这个警告并没有告诉你，反应是强迫输入是只读的。它告诉你，反应不是这样。你最终会得到一个表示不变状态的可变输入。用户将能够对输入进行更改，但是一旦触发重呈现，这些更改将在从应用程序状态重新生成输入时丢失。
这就是React告诉您添加readOnly或onChange属性的原因。要么使输入不可变以与状态匹配，要么使状态可变以与输入匹配。
我以前没有使用过defaultValue，但我认为它可以自动地将onChange事件连接到幕后的某个状态。我认为，如果省略了value属性，React可能也会这样做，但如果存在value字段，则不会这样做，这样就不会与组件中的任何状态绑定发生冲突，而是抛出此警告。
https://stackoverflow.com/questions/35794097
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号