Question

我有一个表格，其中我在输入标签中显示了先前的字段值。但是，正如我所说的那样，type = number。则我的.toLocaleString("en-IN")无法正常工作。此外，我想以INR货币样式显示逗号。即12,25,789

以下是我的代码：

<Col lg="2">
    <Form.Control
        size="sm"
        // type="number"
        value={temp.originalAmount.toLocaleString("en-IN")}
        onChange={this.handlechangevalue.bind(
            this,
            item,
            keys,
            index
        )}
     />                  
</Col>

P.S一直在使用react-bootstrap

Answer 1

我不清楚您要在哪里使用逗号分隔的值，但是可以借助regexp和replace在样式之间进行更改。像这样：

// 1234567 => 12,34,567
const encode = string => string.match(/(\d{2})(\d{2})(\d{3})/).slice(1).join(',');

// 12,34,567 => 1234567
const decode = string => string.replace(/,/g, '');

（如果您输入的内容看起来像two digits / comma / two digits / comma / three digits，但是可以很容易地对其进行更改。）然后，您可以将结果转换为数字，然后保存到状态，然后再转换回逗号版本以显示用户。

此外，我将在基于正则表达式的验证器的输入字段上使用文本类型。对于日期，我也使用类似的方法。

Answer 2

我以前遇到过这个。您可以做的是将handlechangevalue函数中的输入类型限制为仅数字。如果出现其他任何字符，则将其丢弃/忽略。

类似这样的东西：

handlechangevalue(e) {
  if( parseInt(e.target.value) !== NaN ) {
    this.setState({val: e.target.value});
  }
}

如何在reactjs的输入字段中放入逗号分隔符？

2 个答案: