Javascript React如何能够抑制输入字段值的变化？_Javascript_Reactjs

Javascript React如何能够抑制输入字段值的变化？

javascript reactjs

Javascript React如何能够抑制输入字段值的变化？,javascript,reactjs,Javascript,Reactjs,我看过詹姆斯·纳尔逊的系列剧。本系列介绍了一个使用React实现的表单，并说明输入字段实际上是只读的，然后继续解释如何正确更改值。这不是一个如何做到这一点的问题。相反，我想了解React是如何防止值发生变化的以下代码（也在中）为SSCCE： <!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.

我看过詹姆斯·纳尔逊的系列剧。本系列介绍了一个使用React实现的表单，并说明输入字段实际上是只读的，然后继续解释如何正确更改值。这不是一个如何做到这一点的问题。相反，我想了解React是如何防止值发生变化的

以下代码（也在中）为SSCCE：

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
  </head>
  <body>
    <div>
      <h3>simple HTML form (no ReactJS)</h3>
      <form>
        <input type='text' value placeholder='please enter your name'>
      </form>
    </div>
    <div id='react-app'>
      <script type='text/javascript'>
       const rce = React.createElement.bind(React);
       const rcc = React.createClass.bind(React);

       const ContactForm = rcc({
         propTypes: {
           value: React.PropTypes.object.isRequired,
         },
         render: function() {
           return rce('form', {}
                    , rce('input', {type: 'text'
                                  , placeholder: 'please enter your name'
                                  , value: this.props.value.name
                                  , onInput: function(se) {
                                    console.log(se.target.value);
                                  }}))}
         , componentWillMount       : function () {console.log('componentWillMount');}
         , componentDidMount        : function () {console.log('componentDidMount');}
         , componentWillReceiveProps: function () {console.log('componentWillReceiveProps');}
         , shouldComponentUpdate    : function () {console.log('shouldComponentUpdate');}
         , componentWillUpdate      : function () {console.log('componentWillUpdate');}             
         , componentDidUpdate       : function () {console.log('componentDidUpdate');}             
         , componentWillUnmount     : function () {console.log('componentWillUnmount');}
       });

       const ContactView = rcc({

         propTypes: {
           newContact: React.PropTypes.object.isRequired,
         }
         ,render: function () {
           console.log('render called');
           return rce('div', {}
                    , rce('h3', {}, 'why doesn\'t the input field value change?')
               , rce(ContactForm, {
                 value: this.props.newContact
               }))
         }
       });

       var reactApp = rce(ContactView, {newContact: {name: ''}});
       ReactDOM.render(reactApp, document.getElementById('react-app'));
      </script>
  </body>
</html>


简单的HTML表单（无反应JS）
constrce=React.createElement.bind（React）；
const rcc=React.createClass.bind（React）；
const ContactForm=rcc({
道具类型：{
值：React.PropTypes.object.isRequired，
},
render:function（）{
返回rce（'form'，{}
，rce（'input'，{type:'text'
，占位符：“请输入您的姓名”
，value:this.props.value.name
，onInput:function（se）{
console.log（se.target.value）；
}}))}
，componentWillMount:function（）{console.log（'componentWillMount'）；}
，componentDidMount:function（）{console.log（'componentDidMount'）；}
，componentWillReceiveProps:function（）{console.log（'componentWillReceiveProps'）；}
，shouldComponentUpdate:function（）{console.log（'shouldComponentUpdate'）；}
，componentWillUpdate:function（）{console.log（'componentWillUpdate'）；}
，componentDidUpdate:function（）{console.log（'componentDidUpdate'）；}
，componentWillUnmount:function（）{console.log（'componentWillUnmount'）；}
});
const ContactView=rcc({
道具类型：{
newContact:React.PropTypes.object.isRequired，
}
，render:function（）{
log（'render called'）；
返回rce（'div'，{}
，rce（'h3'，{}，'为什么输入字段值没有更改？'）
，rce（联系方式{
值：this.props.newContact
}))
}
});
var reactApp=rce（ContactView，{newContact:{name:''}）；
render（reactApp，document.getElementById（'react-app'）；

上面的代码生成两个html表单：一个是用简单html创建的，另一个是用ReactJS创建的。渲染的元素相同：

对于简单HTML表单：

对于使用ReactJS创建的HTML表单：

我正在控制台上记录调用的每个组件生命周期方法的消息。似乎只有

render

、

componentWillMount

和

componentDidMount

（并且仅在开头）被调用。在输入文本字段中输入击键时，不会调用后续的生命周期方法

因此，我的问题是：如果没有调用其他生命周期方法，那么如果输入字段的DOM表示形式与普通HTML表单输入字段的DOM表示形式相同（在这种情况下，当我在输入字段中键入时，浏览器中显示的值确实发生了变化），ReactJS如何防止输入字段值发生变化？

React使用的概念是。它所做的是“虚拟地”跟踪更改，并用这种抽象替换“真实的”DOM

当组件被（重新）渲染时，它将虚拟DOM映射为“真实”DOM。一旦您的输入字段值绑定到通过

props

接收的值，它就不会更改（因为您没有更改

props

）

如果要使值与键入的内容保持同步，可以将值绑定到组件

状态

关于你的第二个问题，我不太明白，但你可能想看看。这使您可以在发生某些更改时控制组件（例如，传递新的道具）

更新因为我不认为我是清楚的，让我详细说明一下

根据报告：

由于此方法在任何时间点描述视图，因此文本输入的值应始终为

无标题

，我想我了解虚拟DOM。我的问题是，如果：（a）console.log（

se.target.value

）报告击键，这意味着值已经改变，至少是暂时的，（b）每次击键后不再调用

render

，因此ReactJS没有机会重写（瞬间改变）

se.target.value

并将其重置为通过

props

绑定的值。您确实在键入，但这并不意味着您正在分配值。此外，由于您既不更改

状态

也不更改

props

，因此不会再次调用

渲染

。您可能需要检查此链接中的高级主题：。此外，请检查此链接回答理解属性和值之间的区别：我想我得到了

属性

和

值

的区别，但不管怎样，考虑到使用的DOM元素是相同的，为什么我在浏览器中看到的更改是在普通HTML情况下，而不是在ReactJS情况下？（我已经更新了显示两个不同DOM

form

元素的问题，以尽可能清楚地说明这一点）。如果ReactJS在幕后附加侦听器以覆盖更改，这是否违背了ReactJS是一个库而不是一个框架的说法？@RafaelQuintanilha我想OP感兴趣的是知道如何使用vanilla JS实现完全相同的行为。当您尝试在输入框中输入某些内容时，它会触发一些事件（向下键、按下键、输入、向上键、更改）。React必须侦听一个或多个此类事件，并防止出现默认行为，然后再次执行s

<input type="text" name="title" value="Untitled" />

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}