演示:http://jsfiddle.net/NV/qQ5Cs/
/** * @jsx React.DOM */ var NumberField = React.createClass({ render: function() { return ; }, 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; }, 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); }
C
F
当我将°F值更改为1时,它会转换为摄氏温度,然后再转换为华氏温度,从而导致舍入误差.
有没有办法避免更新当前修改过的元素?
Backbone.js有完全相同的问题.
你问,
有没有办法避免更新当前修改过的元素?
一般来说,不是真的.这实际上是React的一个功能:保证您的UI始终与基础数据同步!当然,通过覆盖shouldComponentUpdate
和做一些手动工作,您可以防止字段发生变化,但有意识的是,阻力最小的路径会引导您获得始终准确的UI.
听起来您希望能够显示精确的°C温度或精确的°F温度,因此这里的最佳方法似乎也是存储它.否则,你假装比实际更精确.我修改了你的代码,使它以两种模式之一运行:Celsius模式或Fahrenheit模式:
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问题的回答表明这不是您首选的解决方案.)