反应电话号码输入格式和无格式输出

我正在尝试在输入中创建电话号码格式 并且其下方的输出中没有电话号码格式。 我还想添加一个条件，如果用户输入超过 10 个条目，则输入中将不再有电话格式。

另外，请告诉我是否有任何方法可以在没有react-number-format 库的情况下执行此操作。

import React, { Component } from 'react';
import NumberFormat from 'react-number-format';

class App extends Component {
  state ={
  userInput: ''
}


  inputChangedHandler = (event) => { 
   this.setState({userInput: event.target.value});
   }
  render() {
    return (
      <div className="App">
        <input type="number"
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        <NumberFormat 
        format="(###) ###-####" mask=""
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        </div>
    );
  }
}

export default App;

From 反应数字格式文档 https://github.com/s-yadav/react-number-format你可以利用onValueChange返回一个函数值对象 https://github.com/s-yadav/react-number-format#values-object.

  inputChangedHandler = (values) => {
    this.setState({
      userInput: values,
    });
  }

然后我们使用this.state.userInput.value获取未格式化的值。

<NumberFormat
  format="(###) ###-####"
  mask=""
  name="phoneNumberInput"
  placeholder="Phone Number Here"
  onValueChange={this.inputChangedHandler}
  value={this.state.userInput.value}
/>
<p><strong>Value: </strong>+1{this.state.userInput.value}</p>