在React.js中获得计算值的正确方法

Question

设置的

所以基本上我有三个由状态支持的维度字段（长度，宽度和高度）。我希望将状态保持在英寸，但允许用户随意切换显示器上的单元。目前我只支持英寸和英尺，所以我有一个“dimension_unit”状态存储当前显示的单位和display_dimensions_multiplier，它存储1.0英寸和1.0 / 12.0英尺（两者都处于状态）。除了一件事，我完全按照自己的意愿行事。

问题

我尝试过的所有值都有效，除非您尝试使用小数。基本上，在后台它运行时抛出乘数以在变化状态下保存状态，然后在字段的值中相乘，这基本上消除了尾随“。”。当你输入所以说你试图输入4.5时，你在键入的字段中实际得到的是45。但是如果你输入45然后将光标移动到4和5之间加上。你最终会得到4.5 ......

我的想法

我正在考虑解决它的方式基本上有一个display_length的状态变量，然后有常规长度状态，然后使display_length保持不变，除非他们改变单位并计算和存储长度的变化和然后只是坚持......而且高度和宽度都一样......但这似乎是非常不反应的 - 所以这样做的反应方式是什么？或者就是这样吗？

如果需要，很高兴发布示例代码，但是对于任何组件都有很多代码，所以...是的...希望只是解释就足够了。

EDIT1

小提琴前的基础：before

这是我的想法，我很好奇：after

主要区别在于：

_handleChange: function(ev){
  ev.stopPropagation()
  ev.preventDefault()
  var key = ev.target.name;
  var value = ev.target.value;
  var indims = this.state.input_dimensions;
  indims[key] = value;
  this.setState({input_dimensions: indims});
  value = (value / this.state.display_dimensions_multiplier);
  var dims = this.state.dimensions;
  dims[key] = value;
  this.setState({dimensions: dims});
},

Answer 1

我认为您的解决方案是正确的想法。一些类似的想法：

• 仅在提交输入时更新存储的值（例如onBlur而不是onChange）。您可以应用通用实时输入验证以确保它是有效数字。
• 就像你说的那样使用一个单独的“显示”状态（我会认为这是一个“输入状态”），当组件使用新的存储值更新时，只有在输入状态不同时才更新（当转换为相同的单位时） ）。这样您就不需要持久或担心输入组件外的“输入状态”。
• 当输入具有焦点时，请勿在存储值更改时更新输入状态。当输入没有焦点或模糊时，将输入状态更新为存储值。

我不知道任何这些解决方案或你提出的解决方案都比其他解决方案更具“Reacty”。我认为这取决于你。