javascript - ReactJS 中的条件电话掩码数字作为 if 语句或函数

Question

我试图让我的输入显示为美国电话号码格式，直到我达到第 10 个输入。一旦我到达第 11 个输入，我想让它失去掩码格式。

附件是我的 ReactJS 代码：

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

class App extends Component {
  state ={
  userInput: ''
}
phoneNumberFormatHandler =(values, event)=>{
console.log("values are " + values);
console.log("events are " + event);
}

  inputChangedHandler = (values, event) => { 
   this.setState({userInput: values});
  console.log(values);
  console.log(event);
  console.log(this.formatPhoneNumber(values.value));
  }
  render() {
    return (
      <div className="App">
                <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>
        </div>
    );
  }
}

export default App;

标签： javascriptreactjsif-statementphone-numbermasking

Answer 1

this.state.userInput.length <= 10 ? mask=this.formatPhoneNumber : mask=this.state.userInput

设置一个条件来判断输入是否超过 10 个字符，如果是则不格式化。