演示：
http://jsfiddle.net/NV/qQ5Cs/
/**
* @jsx React.DOM
*/
var NumberField = React.createClass({
render: function() {
return <input type="number" value={this.props.value} onInput={this.onInput}/>;
},onInput: function(e) {
if (!this.props.onValueChange) {
return;
}
var value = parseInt(e.target.value,10);
return this.props.onValueChange(value);
}
});
var TempConverter = React.createClass({
getinitialState: function() {
return {c: 0};
},render: function() {
var c = this.state.c;
return <p>
<NumberField onValueChange={this.onChangeC} value={c}/> C
<br/>
<NumberField onValueChange={this.onChangeF} value={c2f(c)}/> F
</p>;
},onChangeC: function(c) {
this.setState({c: c});
},onChangeF: function(f) {
this.setState({c: f2c(f)});
}
});
function c2f(c) {
return 1.8 * c + 32;
}
function f2c(f) {
return 0.5555555555555 * (f - 32);
}
当我将°F值改为1时,将其转换为摄氏度,然后恢复到华氏度,导致四舍五入错误.
有没有办法避免更新当前修改的元素？
Backbone.js has the exact same problem.
解决方法
你问,
Is there any way to avoid updates on the currently modified element?
一般来说,不是真的.这实际上是React的一个功能：您的UI保证始终与您的基础数据保持同步！当然,通过覆盖shouldComponentUpdate并进行一些手动工作,您可以防止字段更改,但有意思的是,最小阻力的路径会导致您始终准确的UI.
听起来,您希望能够显示一个精确的温度或精确的°F温度,所以最好的方法似乎也是存储.否则,你比你实际上更准确.我修改了你的代码,使其工作在两种模式之一：摄氏模式或华氏模式：
var TempConverter = React.createClass({
getinitialState: function() {
return {type: "c",val: 0};
},render: function() {
var c,f;
if (this.state.type === "c") {
c = this.state.val;
f = c2f(c);
} else {
f = this.state.val;
c = f2c(f);
}
以这种方式跟踪价值,您可以存储和显示用户输入的确切温度,并确信您不会失去任何精度.
现场演示：http://jsfiddle.net/spicyj/3g4bR/
(当然,您也可以在显示之前缩小温度,但您对Backbone.js问题的回应表明这不是您的首选解决方案.)