Javascript React中如何实现只读字段？_Javascript_Html_Reactjs

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

javascript html reactjs

Javascript React中如何实现只读字段？,javascript,html,reactjs,Javascript,Html,Reactjs,我将此SSCCE放在一起，以测试使用ReactJS创建的表单中的只读字段，而不是普通HTML表单和字段（也在中）：我的问题是ReactJS as是如何实现这一点的，通过检查DOM元素，我发现普通HTML表单和ReactJS生成的表单之间没有本质区别： ReactJS是否正在执行一些幕后JavaScript，将该字段设置为有效的只读？如果是这样的话，我怎样才能发现这种附加到DOM元素上的逻辑呢？这是否与ReactJS是一个库而不是一个框架的想法背道而驰（因此更透明、更容易推理？警告并没有告诉您

我将此SSCCE放在一起，以测试使用ReactJS创建的表单中的只读字段，而不是普通HTML表单和字段（也在中）：

我的问题是ReactJS as是如何实现这一点的，通过检查DOM元素，我发现普通HTML表单和ReactJS生成的表单之间没有本质区别：

ReactJS是否正在执行一些幕后JavaScript，将该字段设置为有效的只读？如果是这样的话，我怎样才能发现这种附加到DOM元素上的逻辑呢？这是否与ReactJS是一个库而不是一个框架的想法背道而驰（因此更透明、更容易推理？

警告并没有告诉您React是在强制输入为只读。它告诉你反应不是。您将得到一个表示不可变状态的可变输入。用户可以对输入进行更改，但一旦触发重新渲染，这些更改将在从应用程序状态重新生成输入时丢失

这就是React告诉您添加

readOnly

或

onChange

属性的原因。要么使输入不可变以与状态匹配，要么使状态可变以与输入匹配

我以前没有使用过

defaultValue

，但我想它是通过将

onChange

事件自动连接到后台的某个状态来工作的。我认为如果省略了

value

属性，React可能也会这样做，但如果存在

value

字段，则不会这样做，以免与组件中的任何状态绑定冲突，而是抛出此警告

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

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`.