如何在React中实现只读字段？

Question

I put together this SSCCE to test read-only fields in forms created using ReactJS versus plain HTML forms and fields (also in jsfiddle ): 我把这个SSCCE放在一起测试使用ReactJS创建的表单中的只读字段与纯HTML表单和字段（也在jsfiddle中）：

<!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>

Sure enough, the field created with ReactJS is read-only and in fact I see this message in the console as well: 果然，使用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`.

My question is how is this enforced by ReactJS as, examining the DOM elements I see no essential difference between the plain HTML form and the ReactJS-generated one: 我的问题是ReactJS如何强制执行，检查DOM元素我发现纯HTML表单与ReactJS生成的表单之间没有本质区别：

Is ReactJS executing some behind-the-scenes JavaScript that sets that field to effectively read-only? ReactJS是否正在执行一些幕后JavaScript，将该字段设置为有效只读？ And if so, how can I discover this kind of logic that's attached to my DOM elements? 如果是这样，我怎样才能发现附加到我的DOM元素的这种逻辑？ Doesn't this run counter to the idea that ReactJS is a library and not a framework (and as such more transparent and easier to reason about?) 这是否与ReactJS是一个库而不是一个框架的想法背道而驰（因此更透明，更容易推理？）

Answer 1

That warning isn't telling you that React is forcing the input to be readonly. 该警告并未告诉您React强制输入是只读的。 It's telling you that React isn't. 它告诉你React不是。 You'll end up with a mutable input representing immutable state. 你最终会得到一个表示不可变状态的可变输入。 The user will be able to make changes to the input, but as soon as a re-render is triggered, those changes will be lost as the input is regenerated from the application state. 用户将能够对输入进行更改，但是一旦触发重新渲染，当从应用程序状态重新生成输入时，这些更改将会丢失。

That's why React is telling you to add either the readOnly or onChange attribute. 这就是React告诉你添加readOnly或onChange属性的原因。 Either make the input immutable to match up with the state, or make the state mutable to match up with the input. 使输入不可变与状态匹配，或使状态可变以与输入匹配。

I haven't used defaultValue before, but I imagine it works by automatically hooking up an onChange event to some state behind the scenes. 我之前没有使用过defaultValue ，但是我想它可以通过自动将onChange事件连接到幕后的某个状态来工作。 I think React probably also does the same if the value attribute is omitted, but does not do this if the value field is present, so as not to conflict with any state binding in the component, and instead throws this warning. 我认为如果省略value属性，React可能也会这样做，但如果value字段存在则不会这样做，以免与组件中的任何状态绑定冲突，而是抛出此警告。

如何在React中实现只读字段？

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-03-04 11:29:04

如何在React中实现只读字段？

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-03-04 11:29:04

解决方案1
4 已采纳 2016-03-04 11:29:04