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

Question

我试图实现的是仅在用户foucs并change时将comma添加到数字(price format) ，当用户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>

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

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

Answer 1

您需要区分始终没有任何逗号的value和带有逗号的格式化price 。 此外，建议在 state 中仅保存 1 个数据源，例如在需要时value另一个数据源（注意“当需要时”是另一个 state，例如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>

Answer 2

您可以将这样的 function 用于逗号格式的显示：

const format = (num)=>{
  numArray = num.toString().split('').reverse();
  for(let i = 3; i < numArray.length; i+=4){
    numArray.splice(i, 0, ',');
    }
  return numArray.reverse().join("");
}

然后，当您控制 state 时，只需在原始数字和格式化数字之间提示不同的显示或值。