BFE.devAI解答 - React 代码题
10. phone number input

可能的React代码实现：

import React from "react";

class PhoneNumberInput extends React.Component {
  state = { value: "" };

  handleChange = (event) => {
    const { value } = event.target;
    // only allow numerical digits
    const phoneNumber = value.replace(/[^\d]/g, "");
    let formattedPhoneNumber = phoneNumber;
    // add parenthesis and - to format the phone number
    if (phoneNumber.length > 3) {
      formattedPhoneNumber = `(${phoneNumber.slice(0, 3)})`;
      if (phoneNumber.length > 6) {
        formattedPhoneNumber += `${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6)}`;
      } else {
        formattedPhoneNumber += `${phoneNumber.slice(3)}`;
      }
    }
    this.setState({ value: formattedPhoneNumber });
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

export default PhoneNumberInput;

如果用户在中间删除了某些数字，光标位置不在我们上述实现中覆盖的测试范围内，因此我们不能保证光标行为符合预期。如果需要更精细的光标控制，请参考ReactCursorPosition等类似库的使用方式。