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

Question

设置

所以基本上我有由状态支持的 3 个维度字段（长度、宽度和高度）。我想以英寸为单位保持状态，但允许用户随意切换显示器上的单位。目前我只支持英寸和英尺，所以我有一个“dimension_unit”状态来存储当前显示的单位和 display_dimensions_multiplier 存储 1.0 英寸和 1.0/12.0 英尺（两者都处于状态）。除了一件事，我的一切都按照我的意愿工作。

问题

我尝试过的所有值都有效，除非您尝试使用小数。基本上，在后台运行时抛出乘数以在更改状态下保存，然后乘回该字段的值，该字段基本上擦除了尾随的“。”当您键入时，假设您正在尝试键入 4.5，您键入时在该字段中实际得到的是 45。但是如果您键入 45，然后在 4 和 5 之间移动光标，则添加 .你最终会得到 4.5...

我的想法

我想解决它的方法基本上是为 display_length 设置一个状态变量，然后让 display_length 保持不变，除非他们改变单位并且计算长度并存储在变化和然后坚持下去......对于高度和宽度也是如此......但这似乎非常不活跃，那么这样做的反应方式是什么？还是这样？

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

编辑1

小提琴前的基础：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）。您可以应用通用实时输入验证来确保它是有效数字。
• 就像您说的那样，使用单独的“显示”状态（我认为这是“输入状态”），当组件使用新存储的值更新时，仅在输入状态不同时才更新输入状态（转换为相同的单位时） )。这样您就无需坚持或担心输入组件之外的“输入状态”。
• 当输入有焦点时，当存储值改变时不要更新输入状态。当输入没有焦点或模糊时，将输入状态更新为存储的值。

我不知道这些解决方案中的任何一个或您提出的解决方案都比其他解决方案更“反应灵敏”。我认为这完全取决于您。