Question

我需要在React中执行以下操作：

我有一个输入元素，用户可以在其中输入电话号码。当他输入电话号码时，我需要显示输入元素中格式化的电话号码，例如：用户类型1，我需要显示（1）。

输入元素是否具有某些属性或其他属性，通过它我可以控制输入元素中将显示的内容而无需更改其内部值（用户类型）？您是否还有其他想法，我将如何实现类似的目标？

与此同时，我发现不完美且有问题的唯一方法是保留未格式化电话号码的状态（仅数字），并在on change事件中设置状态并设置属性值输入元素到状态字符串（仅包含数字的数字）加上格式（方括号）。这样有问题。以下是我的代码：

class InputPhoneNumber extends React.Component {
  usaFormat(numStr) {
    var numArr = numStr.split("");
    var res = "";

    if (numArr.length > 10 || numArr.length === 0) res = numStr;
    else {
      if (numArr.length > 2) {
        numArr.splice(0, 0, "(");
        numArr.splice(4, 0, ")");
      } else {
        if (numArr.length > 1) {
          numArr.splice(0, 0, "(");
          numArr.splice(3, 0, " ", ")");
        } else {
          numArr.splice(0, 0, "(");
          numArr.splice(2, 0, " ", " ", ")");
        }
      }

      res = numArr.join("");
    }

    return res;
  }

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

class PhoneNumberInputDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleChange = this.handleChange.bind(this);
  }

  onlyDigits(usaFormatStr) {
    var digitsArr = usaFormatStr.match(/\d+/g);
    var digitsStr = "";

    if (digitsArr != null) digitsStr = digitsArr.join("");

    return digitsStr;
  }

  /*checkMissingRightBracket( usaFormatStr )
      {
        var usaFormatArr = usaFormatStr.split( "" );

        if( usaFormatArr[0] === '(' )
        {
            if( usaFormatArr.length <== 4 && 
                )
          {

          }
        }
      }*/

  handleChange(event) {
    var digitsStr = this.onlyDigits(event.target.value);
    this.setState({ value: digitsStr });
  }

  render() {
    return (
      <div>
        <InputPhoneNumber
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<PhoneNumberInputDisplay />, document.getElementById("root"));

我可以显示与用户输入元素不同的内容吗？

0 个答案: