Question

我必须将数字设置为状态（1400000），然后对其进行数学运算。问题是，我需要将数字的格式显示为：“ 1.400.000”。我考虑过一个正则表达式，但是我不知道如何实现它。有什么想法吗？

   class MyComponent extends React.Component {
      constructor() {
        super()
        this.contentEditable = React.createRef();
        this.state = {html: "1400000", size: 380};
      };

      handleChange = evt => {
        this.setState({html: evt.target.value});
      };

      render = () => {
        return 
<div><ContentEditable
                  innerRef={this.contentEditable}
                  html={this.state.html} 
                  disabled={false}       
                  onChange={this.handleChange} 
                />
<p>{this.state.price/this.state.size}</p>
      };
    };

Answer 1

因此，我可以为您提供npm软件包react-number-format的现成解决方案

您可以用所需的格式表示数字，只需设置所需的属性即可，例如：代替<p>{this.state.price/this.state.size}</p> 您可以使用：

<NumberFormat value={this.state.price/this.state.size} displayType={'text'} thousandSeparator={'.'}  />

Answer 2

您可以执行此操作以设置文本格式。这样，您将不必包括任何（可能）不必要的组件。

preact-compat

希望这会有所帮助

反应：将整数转换为带点分隔符的数字

2 个答案: