当onchange处理程序使用javascript检测长度为4时，如何在状态文本框中自动添加连字符

我有一个模块，我需要将文本框的值格式化为xxxx-xxxxxxx。现在我已经通过使用

e.target.value.length

检测了文本框的长度，我的目标是当处理程序检测到4的长度时，连字符将在文本框的第三个长度值之后自动加入。例如xxxx-我目前正在使用react js

问题：连字符插入的长度为4

目标：xxxx-xxxxxxx

这是我的处理程序：

 handleChange = (e) => {
    
    let val = e.target.id ? e.target.id : e.target.name
    
    var value = { [val]: e.target.value };

    if(val == 'mobile_number') {
      if(e.target.value.length === 4) {
        value = this.state.formData.mobile_number += "-"
      }
    }

    this.setState((prevState) => ({
      formData: {
        ...prevState.formData,
        ...value,
      },
    }));
    
  };

这是我的手机号码文本框：

<input
  type="text"
  className="form-control r-5"
  id="mobile_number"
  value={mobile_number || ''}
  required
  onChange={this.handleChange}
  maxLength='12'
/>

我的工作：

---

你可以这样做

let input = "78945612378584"
let firstFour = input.substring(0,4)
let last =  input.substring(4,input.length)
let d = firstFour+'-'+last
console.log(d) //"7894-5612378584"

---

在附加连字符时，需要使用来自

event.target

的值，而不是使用您的状态。这是因为您的状态具有“not still Update”值，该值通过事件从处理程序到达

反而

      if(e.target.value.length === 4) {
        value = this.state.formData.mobile_number += "-"
      }
    

您应该执行以下操作，以在添加输入和删除输入时支持这两种情况：

      let value;
      if (
        event.target.value.length === 5 &&
        event.target.value.includes("-")
      ) {
        value = event.target.value.replace("-", "");
      }
      if (event.target.value.length === 4) {
        value = event.target.value + "-";
      }
    }}

---

编辑：链接到沙盒->

如果你重写

If（e.target.value.length==4）{value=this.state.formData.mobile_number+=“-”}

到

If（e.target.value.length==5）{value=this.state.formData.mobile_number+=“-”}

它解决了吗？@BudaÖ是的，它已经工作了。然而，当我做退格删除我的价值。它停止xxxx-x，我无法删除所有值。是否要我给出答案？还是你已经找到了另一个解决方案？@BudaÖrs还没有解决。现在的问题是当我退格删除该值时。它有5个长度，我不能删除allvalue=e.target.value+“-”；这不起作用，因为formData有许多属性。对，我添加了沙盒和工作示例。它不是同一个类的组件，但思想是一样的。这将如何在组件基础上工作？它在组件基础上工作。只是它是功能组件，您的代码是用类组件编写的。您需要将我粘贴的代码合并到onChange处理程序中。