React Phone 数字输入格式和无格式输出

Question

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

此外，如果没有 react-number-format 库，请告诉我是否有任何方法可以做到这一点。

App.js

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;

Answer 1

来自 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得到未格式化的值。

<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>

React Phone 数字输入格式和无格式输出

React Phone Number input format and Output without format

format

mask

phone-number

jsx

reactjs