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

Question

我有一个模块，需要将textbox的值格式化为xxxx-xxxxxxx。现在，我已经通过使用e.target.value.length来检测我的文本框的长度，我的目标是当处理程序检测到4的长度时，连字符将在textbox的第三个长度值之后自动加入。例如。xxxx-我目前使用的是react。

问题：连字符插入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,
      },
    }));
    
  };

这是我的mobile_number文本框：

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

我的工作：

​

​

Answer 1

您需要使用来自event.target的值，而不是使用您的状态，同时附加连字符。这是因为您的状态具有“未更新的”值，该值通过事件从处理程序到达。

相反，

      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 + "-";
      }
    }}

编辑:链接到沙箱-> https://codesandbox.io/s/add-hyphen-after-4-input-pxohf?file=/src/App.js

Answer 2

你可以做这样的事

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"