Question

Double-conversion problem

/**
 * @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时，它会转换为摄氏温度，然后再转换为华氏温度，从而导致舍入错误。

有没有办法避免对当前修改过的元素进行更新？

punch back

Backbone.js has the exact same problem

Answer 1

你问，

有没有办法避免对当前修改过的元素进行更新？

总的来说，不是真的。这实际上是React的功能：您的UI始终与您的基础数据保持同步！当然，通过覆盖shouldComponentUpdate并进行一些手动工作，您可以防止字段发生变化，但有意的是，阻力最小的路径会引导您获得始终准确的UI。

听起来您希望能够显示精确的°C温度或精确的°F温度，因此这里的最佳方法似乎也是 store 。否则，你假装比实际更精确。我修改了你的代码，使它以两种模式之一运行：摄氏模式或华氏模式：

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问题的回答表明这不是您首选的解决方案。）

React.js：避免更新当前编辑的输入

1 个答案: