10

二重変換問題

デモ: jsfiddle 

/**
 * @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 にもまったく同じ問題があります。

4

1 に答える 1

13

あなたが尋ねる、

現在変更されている要素の更新を回避する方法はありますか?

一般的に、そうではありません。これは実際には React の機能です。UI は常に基礎となるデータと同期していることが保証されています。もちろん、オーバーライドshouldComponentUpdateしていくつかの手動作業を行うことで、フィールドが変更されるのを防ぐことができますが、抵抗が最も少ないパスが常に正確な UI につながるように意図的に設計されています。

正確な°C温度または正確な°F温度のいずれかを表示できるようにしたいように聞こえるので、ここでの最良のアプローチはそれも保存することです. そうしないと、実際よりも精度が高いふりをしていることになります。摂氏モードまたは華氏モードの 2 つのモードのいずれかで動作するようにコードを変更しました。

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);
        }

このように値を追跡することで、ユーザーが入力した正確な温度を保存および表示でき、精度が失われていないことを確信できます。

ここでのライブデモ: jsfiddle

(もちろん、表示する前に温度を四捨五入することもできますが、Backbone.js の質問に対するあなたの回答は、それが望ましい解決策ではないことを示しています。)

于 2013-12-27T07:18:07.283 に答える