Question

我将这个SSCCE放在一起测试使用ReactJS创建的表单中的只读字段与纯HTML表单和字段（也在jsfiddle中）：

REPLACE_QUOTE( 'Failed to connect to ''http://172.17.70.74:80/xyz.x''' );

果然，使用ReactJS创建的字段是只读的，实际上我也在控制台中看到了这条消息：

<!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是如何强制执行的，检查DOM元素我发现纯HTML表单和ReactJS生成的表单之间没有本质区别：

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

Answer 1

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

这就是React告诉您添加Application_Error或readOnly属性的原因。使输入不可变与状态匹配，或使状态可变以与输入匹配。

之前我还没有使用过onChange，但我认为它可以通过自动将defaultValue事件连接到幕后的某个状态来实现。我认为如果onChange属性被省略，React可能也会这样做，但如果value字段存在则不会这样做，以免与组件中的任何状态绑定冲突，而是抛出这个警告。

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

1 个答案: