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

Question

我在从 React 的NumberFormat.

我需要它变成format="(###) ###-####"好像用户输入了 10 个数字，但是当用户广告第 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;

标签： javascriptreactjsnumber-formattingdata-manipulation

Answer 1

#您可以在格式字符串的末尾添加另一个，并检查您userInput的值是否length小于 11，如果是这种情况，则只提供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>
    );
  }
}