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

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 是否有一个小于11 的length，如果是这样的话，只给NumberFormat 一个format 属性。

示例

class App extends Component {
  state = {
    userInput: ""
  };

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

  render() {
    const { userInput } = this.state;

    return (
      <div className="App">
        <NumberFormat
          format={userInput.toString().length < 11 ? "(###) ###-#####" : undefined}
          name="phoneNumberInput"
          placeholder="Phone Number Here"
          onValueChange={this.inputChangedHandler}
          value={userInput}
        />
        <p>
          <strong>Value: </strong>+1{userInput}
        </p>
      </div>
    );
  }
}