Question

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

另外，如果没有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中，您可以使用onValueChange函数，该函数返回一个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>

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

1 个答案: