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 時，只需在原始數字和格式化數字之間提示不同的顯示或值。