Правильный способ рассчитал значение в React.js

Question

Setup

Поэтому в основном у меня есть 3 измерение поля (длина, ширина и высота), которые подкреплены государствами. Я хочу сохранить состояние в дюймах, но позволяет пользователю переключаться на дисплей по желанию. В настоящее время я поддерживаю только дюймы и ноги, поэтому у меня есть состояние «dimension_unit», в котором хранятся отображаемые в данный момент единицы и display_dimensions_multiplier, которые хранят 1.0 для дюймов и 1.0/12.0 для ног (оба находятся в состоянии). У меня все работает так, как я хочу, кроме одного.

Проблема

Все значения, которые я пробовал работал, за исключением, когда вы пытаетесь использовать десятичную. В основном, в фоновом режиме он запускает мультипликатор для сохранения в состоянии при изменении, а затем умножается на значение для поля, которое в основном стирает конечную «.». как вы набираете так сказать, что вы пытались ввести 4.5, то, что вы на самом деле получили в поле, когда вы набрали, это 45. Но если вы наберете 45, а затем переместите курсор между 4 и 5, добавьте. вы в конечном итоге с 4,5 ...

Моя идея

Так я думал о решении это было в основном имеют переменную состояния для display_length и затем иметь регулярное состояние длины, а затем display_length остаются неизменными, если они не меняют единицы измерения и имеют длину, рассчитанную и сохраненную при изменении, а затем просто сохраняют это ... и то же самое по высоте и ширине ... но это кажется очень неактивным, так что реагирует - Как это сделать? Или это так?

Счастливый отправьте пример кода, если необходимо, но есть хороший код для любого компонента, так что ... да ... надеюсь, просто объяснения достаточно.

Edit1

Basic, прежде чем играть на скрипке: 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). Вы можете применить общую проверку ввода в реальном времени, чтобы убедиться, что это действительный номер.
• Как вы говорите, используйте отдельное состояние «отображения» (я бы рассмотрел это «состояние ввода»), и когда компонент обновляется с новым сохраненным значением, обновляет только состояние ввода, если оно отличается (при преобразовании в те же единицы). Таким образом, вам не нужно упорствовать или беспокоиться о «входном состоянии» вне входных компонентов.
• Если вход имеет фокус, не обновляйте входное состояние при изменении сохраненного значения. Когда на входе нет фокуса или размытия, обновите состояние ввода до сохраненного значения.

Я не знаю, что любое из этих решений или тот, который вы предложили, более «реактирует», чем другие. Я думаю, это действительно зависит от вас.