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

Question

演示: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有完全相同的问题.

Answer 1

你问,

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

一般来说,不是真的.这实际上是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问题的回答表明这不是您首选的解决方案.)