reactjs 输入类型编号自动更新(带逗号)

rkttyhzu 于 2023-03-22 发布在 React

关注(0)|答案(3)|浏览(196)

我有一个问题，试图有输入字段自动添加一个逗号的可读性输入。例如123，456。
.toLocaleString（）已用于解析最终结果，但我还需要在输入时显示逗号。
谢谢。

const handleGrossIncomeChange = (event) => {
    const { name, value } = event.target;
    setGrossIncome(value);
    if (resultShower === false){
    setResultShower(!resultShower);
    resultExport = resultShower;
    }
    else {
      return resultShower
    }
  
  };

 <div className="inputClass">
      <div className="input-group">
        <p>Gross Income {""}
          <span className="currency-input">
            <span className="currency-symbol">£</span>
            <input
              type="number"
              name="grossIncome"
              id="grossIncome"
              autoComplete="off"
              onChange={handleGrossIncomeChange}
              className="currency-value"
              placeholder="0.00"
            />
          </span>
        </p>

      </div>

<button type="submit" name="resultTester" onClick={handleClick}>click me </button>

reactjs

来源：https://stackoverflow.com/questions/75807396/input-type-number-auto-update-with-comma

3条答案

按热度按时间

ubof19bj1#

您可以像下面这样使用Intl.NumberFormat Api：

function formatCurrency(event) {

  let value = event.target.value;
  

  value = value.replace(/[^\d]/g, '');
  

  value = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(value / 100);
  
  event.target.value = value;
}

<input type="text" id="amount" oninput="formatCurrency(event)">

赞(0）回复(0）举报 2023-03-22

ctehm74n2#

如果你想接受,沿着.，你必须将输入type改为文本，并使用这个函数来验证它：

const checkInput = (value) => {
  value = value.replace(/,/g, "."); // replace all the , with .
  let count = value.split(".").length - 1; check how many . exists in the string
  if (count > 1) return false; // if there is more than one return false
  if (isNaN(value)) return false; // if it is not a number return false
  return true; 
};

在更新状态值之前：

<input
  type="text"
  value={inutValue}
  onChange={(e) => {
    if (checkInput(e.target.value)) setInputValue(e.target.value);
  }}
/>

赞(0）回复(0）举报 2023-03-22

edqdpe6u3#

由于输入值包含“，”（不是数字），因此输入必须是文本类型。

<input
    type="text"
    onChange={(e) => {
      const value = parseInt(e.currentTarget.value.replaceAll(",", ""));
      if (isNaN(value)) e.currentTarget.value = "0";
      else e.currentTarget.value = value.toLocaleString();
      setGrossIncome(value);
    }}
  />

（在React v18.0，ES5中测试）

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs 输入类型编号自动更新(带逗号)

3条答案

相关问题

热门标签

最新问答