React: 制御入力の場合、nullまたは ""で初期化しない限り、ステップは期待どおりに機能しません。

Windows10のChrome64とDebianのFirefox52の両方で、このフィドルで非常に特殊な動作が見られます。 入力に50000と入力し、すぐに上矢印をクリックすると、50100になります。入力に50000と入力し、ドキュメント内の他の場所をクリックしてから、上矢印をクリックすると、55000になります。

値を変更する必要はありません。上矢印を複数回クリックすると、意味のない数値に変更され始めます。

@andyboyneのレポートをありがとう。 この問題は、フィールドがぼやけるまで数値入力のvalue属性を更新しないという事実に起因します。 これは、ブラウザーの検証に関連する多数の不要な動作を回避するために行います。 cc @ nhunzaker。

これは、制御された入力https://github.com/facebook/react/issues/11896のvalue属性の同期を最終的に停止したら解決する必要があります。

はい。 実は、これについてタイムラインをまとめるべきかと思います。

よく言われるように、これは同期の問題であり、フィールドがぼやけているとフィールドは同期します。
そこで、console.logを追加したところ、フィールドがぼやけていない間はe.target.valueとe.target.getAttribute（ "value"）が同期されていないことがわかりました。
したがって、回避策はe.target.setAttribute（ "value"、e.target.value）;を追加することです。 この値を強制的に更新すると、期待どおりに機能します。

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}

いいえ、これはまだ問題です、それは私を夢中にさせます、私たちはまだv16によって制御された入力を単純化していません！