用TypeScript 将input输入的内容格式化将其格式化为 (xxx) xxx-xxxx 的电话号码并限制输入长度

好的，我理解了你的问题。以下是我的回答：

首先，我们需要在输入框中添加一个 onChange 事件监听器，来监听用户的输入。在 onChange 事件处理函数中，我们可以对用户输入的内容进行处理，以达到格式化电话号码的目的。

下面是一个示例代码：

import React, { useState } from 'react';

const PhoneInput = () => {
  const [phone, setPhone] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const input = event.target.value.replace(/\D/g, '').substring(0, 10); // 只保留数字，限制长度为10

    const formattedInput = input.replace(/^(\d{3})(\d{0,3})(\d{0,4}).*/, '($1) $2-$3'); // 格式化为 (xxx) xxx-xxxx

    setPhone(formattedInput);
  };

  return (
    <input
      type="tel"
      onChange={handleChange}
      value={phone}
      maxLength={14} // 限制输入长度为14，包括括号和破折号
    />
  );
};

export default PhoneInput;

在上面的代码中，我们使用了 React 的 Hooks 来管理组件的状态，通过 useState 来保存用户输入的内容。在 handleChange 函数中，我们使用了正则表达式来去掉非数字字符，并使用 substring 函数来限制输入长度为 10。然后，我们使用 replace 函数将数字格式化为电话号码的形式。

最后，我们将格式化后的电话号码设置为组件状态的值，并在输入框中显示出来。同时，我们通过 maxLength 属性来限制输入框的长度为 14，包括括号和破折号。

希望这个回答能够帮助你解决问题！