Question

我有一个计算器。如何在输入中添加逗号，因此当我输入40000时会自动显示40,000？（该数字仍应保持为40000，以便进行正确的计算。）

这是我获取输入值的方式：

 handleStateChange = (e) => {
        const { target: { name, value } } = e
        this.setState({ [name]: value })
        }

Answer 1

您可以尝试以下正则表达式

handleStateChange = (e) => {
  const { target: { name, value } } = e
  this.setState({ [name]: value.replace(/\B(?=(\d{3})+(?!\d))/g, ",") })
}

Answer 2

有几种在整数之间放置逗号的方法，最简单的方法是使用toLocaleString()，并且可以使用 regex 从字符串中删除逗号，

这里是一个例子。

class App extends React.Component {
  state = {};

  handleStateChange = e => {
    const {
      target: { name, value }
    } = e;
    
    const formatNumber = parseInt(value.replace(/,/g, '')).toLocaleString();
    this.setState({ [name]: formatNumber });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleStateChange} value={this.state.foo} name="foo" />
      </div>
    );
  }
}



ReactDOM.render(<App />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"><div>

Answer 3

这对我有用：

  const handleChange = (name, e) => {
    if(e.target.value) {
      const value = (Number(e.target.value.replace(/\D/g, '')) || '').toLocaleString();
      this.setState({ [name]: value });
    }
    return null;
  };

Answer 4

反应号格式 try this npm package.

如何自动将逗号添加到要键入的数字

4 个答案:

这里是一个例子。