Question

我在处理React的NumberFormat中的格式时遇到麻烦。

如果用户输入10个数字，我需要将其显示为format="(###) ###-####"，但是当用户在广告第11个数字时，必须放弃该格式，但数字仍然显示。

这是我到目前为止尝试过的：

import React, { Component } from "react";
import NumberFormat from "react-number-format";
import PhoneInputHandler from "./PhoneInputHandler/PhoneInputHandler";
class App extends Component {
  state = {
    userInput: ""
  };
  phoneNumberFormatHandler = values => {
    console.log(values);
    //  this.state.userInput.length <= 10 ? this.format="(###) ###-####" : this.format=this.state.userInput.values
  };
  render() {
    return (
      <div className="App">
        {/* <input type="number"
            name="phoneNumberInput"
            placeholder='Phone Number Here'
            onChange={this.inputChangedHandler}
            value={this.state.userInput}/>
            format="(###) ###-####"
            <p id='PhoneOutput'><strong>Value: </strong>+1{this.state.numAsString}</p>
             */}
        <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;

Answer 1

您可以在格式字符串的末尾添加另一个#，并检查userInput的{{1}}是否小于11并仅给length一个{{ 1}}道具（如果是这种情况）。

示例

NumberFormat

反应操纵NumberFormat格式以有条件地工作

1 个答案: