请求实现手机号输入自动格式化（输入1234567890转为(123)456-7890）

你可以通过在输入处理逻辑中过滤非数字字符并分段格式化的方式实现这个功能，具体代码如下：

import React, { Component } from 'react';
import { TextInput } from 'react-native';

class PhoneInput extends Component {
  state = {
    phoneNumber: ''
  };

  onEnterText = (input) => {
    // 过滤掉所有非数字字符
    const cleanedInput = input.replace(/\D/g, '');
    let formattedNumber = '';

    // 根据数字长度分段构建格式化字符串
    if (cleanedInput.length > 0) {
      formattedNumber = `(${cleanedInput.slice(0, 3)}`;
    }
    if (cleanedInput.length > 3) {
      formattedNumber += `)${cleanedInput.slice(3, 6)}`;
    }
    if (cleanedInput.length > 6) {
      formattedNumber += `-${cleanedInput.slice(6, 10)}`;
    }

    this.setState({ phoneNumber: formattedNumber });
  };

  render() {
    return (
      <TextInput
        placeholder='(123)456-7890'
        keyboardType={'phone-pad'}
        style={{
          height: 50,
          backgroundColor: 'white',
          borderRadius: 10,
          padding: 10,
          fontSize: 18,
          marginTop: 10,
          fontWeight: 'bold'
        }}
        onChangeText={this.onEnterText}
        value={this.state.phoneNumber}
      />
    );
  }
}

export default PhoneInput;

关键逻辑说明： #

• 过滤非数字：用replace(/\D/g, '')清除输入中的所有非数字字符，确保只处理有效手机号数字
• 分段格式化：根据输入数字的长度，逐步添加括号和横杠，实现(XXX)XXX-XXXX的格式
• 双向绑定：将TextInput的value绑定到组件状态，确保输入框实时显示格式化后的内容，同时处理删除操作时也能自动调整格式

内容的提问来源于stack exchange，提问作者Vix Hunk