反应电话号码输入格式和输出不带格式 [英] React Phone Number input format and Output without format

问题描述

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

I am attempting to create a phone number format in the input and no phone number format on the output below it. I also want to add a condition that if user types more than 10 entries there will be no more phone format in the input.

另外，如果没有react-number-format格式的库，还有什么办法可以做到这一点.

Also, please let me know if there is any way to do this without the react-number-format library.

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;

推荐答案

来自反应-数字格式文档，您可以使用onValueChange函数，该函数返回

From react-number-format documentation you can make use of the onValueChange function which returns a values object.

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

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

Then we use this.state.userInput.value to get the unformatted 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>

这篇关于反应电话号码输入格式和输出不带格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！