Как я могу применить функцию к значению с реакцией хуков

Question

Я новичок в React Hooks, и у меня есть функциональный компонент в React:

import React, {useState} from 'react'

 const myFunction() {
    const [myValue, setValue] = useState(10000)

function currencyFormat(num) {
   return parseFloat(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

handleChange = (e) => {
...
}       

 return(
      <input value={myValue} onChange={handleChange}
    )
 }

Как я могу применить currencyFormat к myValue, учитывая передовой опыт использования React Hooks.

I получил валютный формат от здесь

Answer 1

Как сказал Том в комментарии выше, вам нужно установить myValue в состоянии на значение, возвращаемое путем передачи значения через функцию форматирования:

function currencyFormat(num) {
   return parseFloat(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

handleChange = (e) => {
  setValue(currencyFormat(e.target.value))
}      

Прямо сейчас вы инициализируете myValue как число, но ваша функция currencyFormat возвращает строку. Для хорошей практики вы, вероятно, захотите инициализировать свое значение в виде строки, которая соответствует формату, который должен возвращать ваш currencyFormat.

Даже если вы сделаете это, ваш currencyFormat не будет работать должным образом. После того как вы изменили значение, myValue будет установлен в форматированную строку, которая будет содержать запятую, если значение> = 1000. Поскольку parseFloat игнорирует все после любого символа, который не является "+" или "-" или " . ", если ваше значение уже содержит запятую, parseFloat вернет неправильное значение:

function currencyFormat(num) {
   return parseFloat(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

console.log(currencyFormat("12,345.6"))
// => "12.00"

Что вы, вероятно, хотите сделать, это сохранить свое значение в виде строкового представления и удалить все нечисловые символы c из введенного значения перед синтаксическим анализом и форматированием:

function currencyFormat(num) {
  return parseFloat(num.replace(/[^0-9.]/g, ""))
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}

console.log(currencyFormat("12,345.6"))
// => "12,345.60"

Поиграйте с в этой песочнице , чтобы увидеть, как ведет себя формат вашей валюты (попробуйте присвоить ей число> = 10 000) и как ведет себя эта обновленная версия.

(В качестве альтернативы вы можете использовать маскированный компонент ввода и оставить myValue как число с плавающей точкой, округленное до 2 десятичных знаков, но это будет большее изменение.)