Javascript 在同一时间键入字段并保存原始数据时进行ReactJS自动格式化

晚上好,

我想制作一个自动格式化字段，但我需要存储原始数据和格式化字符串，并且我想在用户输入时实时自动格式化用户输入。我试过这样的方法：

<input value={this.state.formattedValue} onChange={this.handleOnChange}/>

handleOnChange(e) {
   let value = e.target.value
   let formattedValue = this.formatValue(value) // my formatting function
   this.setState({formattedValue: formattedValue, value: e.target.value})
}

更改（e）{
让值=e.target.value
让formattedValue=this.formattvalue（value）//我的格式化函数
this.setState（{formattedValue:formattedValue，value:e.target.value}）
}

这将是第一次工作，但是

e.target.value

将是格式化值加上新用户的输入，我将丢失原始值

internet上的大多数示例只处理一个值（formattedValue），所以很简单，但我需要原始值和格式化值。在过去的版本中，我在模糊事件中格式化了该值，但在当前的情况下，我需要在键入时实时格式化该值。如果我能得到用户输入的最后一个字符，我就能够将它连接到我状态中的值，并管理转换+原始值

---

谢谢大家

您可以使用两个状态属性，我们称它们为

rawInput

和

formattedInput

rawInput

将是一个数组，

formattedInput

将是一个字符串。然后，您可以获取输入值的最后一个字符，并将其推送到

rawInput

数组中，然后再将格式规则应用于该值

下面是一个示例（注意，我在这里使用了钩子和功能组件，但使用基于类的组件也可以遵循相同的原则）：

import React，{useState}来自“React”；
导出默认函数App（）{
const[rawInput，setRawInput]=useState（[]）；
常量[formattedInput，setFormattedInput]=useState（“”）；
常量handleInput=e=>{
const val=e.target.value；
const lastTypedChar=val[val.length-1]；
setRawInput（[…rawInput，lastTypedChar]]）；
const formatted=val.replace（/[A-Z]/g，c=>c.toLowerCase（））；//在这里使用您自己的格式函数
setFormattedInput（已格式化）；
};
返回(
输入
原始输入：{rawInput.join（“”}

);
}

下面是一个例子

---

请注意，如果需要，当用户删除字符或将长度大于1的字符串粘贴到输入中时，需要应用更多的逻辑来处理。但是分割状态的原则在这里很重要。

您想如何格式化输入文本？当用户删除他们的输入时，这会失败。例如，当用户键入“f”、“o”、“o”时，

rawInput

是

“foo”

，但一旦用户单击backspace，

rawInput

就会变为

“fooo”

而不是

“fo”

@HyunwoongKang是的，我在帖子中提到了这一点。我在帖子中试图解释的话是行不通的。让我们以

（xxx）xxx xxxx

（法加电话号码格式）为例。刚开始没关系，但一旦你进入结束

）

你就会有问题，因为e.target.value将是

（xxx）

，最后一个字符是

）

，所以原始值将是

xxx）

而不是

xxx

（同样的问题是，当你在某个点删除所有数字时，最后一个字符将是

（

）这就是为什么我想知道是否有办法获取最后一个键入的字符（触发onchange事件的字符）@NicolasOuldBouamama最后一个键入的字符是

val[val.length-1]

，正如我在调用

setRawInput

中所包含的那样。我将进行编辑以使其更清楚

import React, { useState } from "react";

export default function App() {
   const [rawInput, setRawInput] = useState([]);
   const [formattedInput, setFormattedInput] = useState("");

   const handleInput = e => {
       const val = e.target.value;
       const lastTypedChar = val[val.length - 1];
       setRawInput([...rawInput, lastTypedChar]]);

       const formatted = val.replace(/[A-Z]/g, c => c.toLowerCase()); // use your own format function here
       setFormattedInput(formatted);
   };

   return (
     <div className="App">
      <h1>Input</h1>
      <input type="text" onChange={handleInput} value={formattedInput} />
       <p>Raw Input: {rawInput.join("")}</p>
     </div>
  );
}