使用this.setState时如何解决手机格式

Question

我想让用户输入电话号码1234567888该电话号码将更改为1234 567 888

我和<TextInput />一起尝试

  constructor(props) {
    super(props);
    this.state = { 
      phoneNumber: '',
    };
  }
      <TextInput 
        style={styles.textInput}
        keyboardType='numeric'
        onChangeText={(tex) => this.adjustPhoneNumber(tex)}
        value={phoneNumber}
        placeholder={'1234 567 888 '}
        autoFocus={true}
        placeholderTextColor='rgba(33, 33, 33, 0.41)'
      />

adjustPhoneNumber = (tex) => {
    let editedPhoneNumber = tex;
    if (tex.length === 4) {
      editedPhoneNumber = tex.concat(' ');
    } else if (tex.length === 8) {
      editedPhoneNumber = tex.concat(' ');
    }
    this.setState({ phoneNumber: editedPhoneNumber });
}

当用户输入手机时，首先正常。

但是如果用户单击键盘上的返回按钮，TextInput将在tex.length === 8时卡住

当我使用this.setState时，有人知道如何修复它吗？

提前谢谢。

Answer 1

问题是，当length为 4 或 8 时，您总是将phoneNumber设置为前一个值加上一个空格。

您需要检查phoneNumber是否已被您编辑，然后不要附加空格。

一个粗略的解决方案是这个检查：

if (this.state.phoneNumber !== editedPhoneNumber) {
  this.setState({ phoneNumber: editedPhoneNumber });
} else {
  this.setState({ phoneNumber: tex });
}

Answer 2

比较新旧 vaule 之间的长度，如果新小于旧值应跳过，当长度等于 4 或 8 时，添加空格操作（或删除最后一个字符）。