如何反应才能抑制输入字段值的变化？
我看过詹姆斯·纳尔逊的学习React.js (没有JSX)系列。本系列文章介绍了一个用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表单:一个是用简单的html创建的，另一个是用ReactJS创建的。呈现的元素是相同的：
对于简单的HTML表单：
对于用ReactJS创建的HTML表单：
我正在控制台上记录正在调用的每个组件生命周期方法的消息。唯一看起来被调用的是render、componentWillMount和componentDidMount (而且只在开始时)。在输入文本字段中输入击键时，不调用后续的生命周期方法。
因此，我的问题是:既然没有调用额外的生命周期方法，那么ReactJS如何设法防止输入字段值的更改，因为它的DOM表示形式与普通的表单输入字段的是完全相同的(在输入字段时，浏览器中显示的值确实会发生变化)？
回答 1
Stack Overflow用户
发布于 2016-03-28 18:21:18
React使用了虚拟DOM的概念。它所做的是“虚拟地”跟踪更改，它们用这个抽象替换了“真正的”DOM。
当呈现组件时，它将虚拟DOM映射为“真实的”DOM。一旦您的输入字段值被限制到通过props接收的值，它就不会改变(因为您没有改变props)。
如果希望使值与所键入的内容保持同步，则可以将值绑定到组件state。
关于你的第二个问题，我不太明白，但你可能想看看构件生命周期。当发生一些更改时，这使您可以控制组件(例如，新的道具被传递下来)。
更新
因为我觉得我说得不清楚，让我再详细说明一下。
根据文档
<input type="text" name="title" value="Untitled" />这将呈现用值Untitled初始化的输入。当用户更新输入时，节点的value属性将发生变化。但是，node.getAttribute('value')仍将返回初始化时使用的值Untitled。
[属性与价值之间的关系可能会让我感到困惑。https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html]
与HTML不同，React组件必须在任何时间点而不仅仅是初始化时表示视图的状态。例如，在反应中：
render: function() {
return <input type="text" name="title" value="Untitled" />;
}由于此方法在任何时间点都描述视图，因此文本输入的值应该始终为Untitled。
https://stackoverflow.com/questions/36267844
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号