javascript - ReactJS 仅在焦点/更改时为价格添加逗号

Question

我想要实现的是仅当用户 foucs 并且 change 时将 comma 添加到数字 (价格格式) code>，当用户 blur 我想显示正常没有逗号。所以到目前为止我尝试的是:

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      price: ''
    };
  }

  price = (v) => {
    return v.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }


  handleBlur = (e) => {
    this.setState({
      price: this.state.value
    })
  }

  handleFocus = (e) => {
    const v = e.target.value;
    this.setState({
      price: this.price(v)
    })
  }

  handleChange = (e) => {
    const v = e.target.value;
    this.setState({
      price: v /*this.price(v)*/,
      value: v
    })
  }

  render() {
    return ( < div className = "Login" > <
      br / >
      <
      input type = "text"
      value = {
        this.state.price
      }
      onBlur = {
        this.handleBlur
      }
      onFocus = {
        this.handleFocus
      }
      onChange = {
        this.handleChange
      }
      /> < /
      div >
    )
  }
}

ReactDOM.render( <
  Login name = "Login" / > ,
  document.getElementById('container')
);

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
</div>

问题:

1. 如果我在 change 上使用它，替换和正则表达式将无法正常工作，它返回如下:2,5,0,0,0,0,0,000。

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      price: ''
    };
  }

  price = (v) => {
    return v.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }


  handleBlur = (e) => {
    this.setState({
      price: this.state.value
    })
  }

  handleFocus = (e) => {
    const v = e.target.value;
    this.setState({
      price: this.price(v)
    })
  }

  handleChange = (e) => {
    const v = e.target.value;
    this.setState({
      price: this.price(v),
      value: v
    })
  }

  render() {
    return ( < div className = "Login" > <
      br / >
      <
      input type = "text"
      value = {
        this.state.price
      }
      onBlur = {
        this.handleBlur
      }
      onFocus = {
        this.handleFocus
      }
      onChange = {
        this.handleChange
      }
      /> < /
      div >
    )
  }
}

ReactDOM.render( <
  Login name = "Login" / > ,
  document.getElementById('container')
);

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
</div>

1. 如果用户模糊它，值仍然有逗号。

所以我想要的是输入数字，它添加逗号并作为价格格式分隔，然后如果模糊，删除逗号

Answer 1

您需要区分始终没有任何逗号的 value 和带逗号的格式化 price。此外，建议在状态中仅保存 1 个真实来源，例如value 并在需要时计算另一个值(请注意，“需要时”是另一种状态，例如 isFocus)。

使用上述原则的示例解决方案:

class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      isFocus: true
    }
  }
  
  price = () => this.state.isFocus
    ? this.state.value.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    : this.state.value
    
  handleBlur = (e) => this.setState({isFocus: false})
  handleFocus = (e) => this.setState({isFocus: true})
  handleChange = (e) => this.setState({value: e.target.value.replace(/,/g, "")})

  render() {
    return (
      <div className="Login">
        <br />
        <input 
          type="text"
          value={this.price()}
          onBlur={this.handleBlur}
          onFocus={this.handleFocus}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}

ReactDOM.render(<Login />, document.getElementById('container'))

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>