React. Как сохранить тип number в значении option?

Question

[Артём Новолодский]

...
<select name="field" value={1} onChange={this.changeForm}>
<option key={0} value={1}>1</option>
<option key={1} value={2}>2</option>
</select>
...

в changeForm поле event.target.value имеет тип string, а надо number.

Как решать траблу?

Answer 1

[Negwereth]

Никак. В аттрибутах все значения сохраняются как строки.

Потому я бы советовал для разных типов данных в инпуте держать разные обработчики. Ну или там на isNaN проверки делать.

...
const number = isNaN(+value) ? value : +value;
...

Answer 2

[alvvi]

Что мешает просто сделать
const n = Number(event.target.value);
?

Comments

[Артём Новолодский]

ну функция changeForm общая на все инпуты. Не все поля должны быть number.

[alvvi]

Артём Новолодский, если она общая, значит у вас что-то не так с архитектурой, костылите)
Но допустим, тогда можно добавить промежуточную функцию:

onChange={e => {
  const event = {...e, target: {...e.target}};
  event.target.value = Number(event.target.value);
  this.changeForm(event);
}}

Но лучше конечно не полагаться на объект ивента, а сразу доставать из него все что надо и передавать в общую функцию.
Если всегда нужна только value, то

onChange={e => this.changeForm( Number(e.target.value) )}

[Максим]

Илья Ростопка, а почему через Number? Достаточно же просто + поставить
this.changeForm( +e.target.value) выглядит короче, преимуществ использования Number на вскидку не знаю..

[alvvi]

Максим, вы правы, их нет, но я предпочитаю Number, на мой взгляд оно делает код чуть более читабельным, так же как и Boolean() вместо !!, но опять же, это просто личное предпочтение)

[Negwereth]

Илья Ростопка, и вместо использования примитивного значения вы создаёте целый объект.

[alvvi]

Negwereth, расскажите подробней, что вы имеете в виду? В каком месте Number(string) создает объект? (если можно со ссылками на спеку) И почему тогда во многих тестах производительности, Number(string) чуть ли не обгоняет +string?

[Артём Новолодский]

Илья Ростопка, наверное компилятор/интерпретатор умеет это оптимизировать, без создания объектов лишних, если с результатом работы Number() далее работать как с примитивным типом.

[alvvi]

Артём Новолодский, window.Number встроенный конструктор, его создавать не нужно, мы просто вызываем его, а остальная магия - это уже нативный код браузера, так что о каком объекте говорит Negwereth я не совсем понимаю, Number(string) возвращает примитив, а не объект.