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

Question

我有模块，我需要将文本框的值格式化为 xxxx-xxxxxxx。现在我已经通过使用e.target.value.length我的目标来检测我的文本框的长度是当处理程序检测到 4 的长度时，连字符将在文本框的第三个长度值之后自动加入。前任。xxxx-我目前使用反应 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,
      },
    }));
    
  };

这是我的 mobile_number 文本框：

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

我的工作：

标签： javascriptreactjs

Answer 1

您需要使用 value fromevent.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