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

我有一个表单，在其中我在输入标记中显示先前的字段值。但是，正如我所说，type=number。那么我的

.toLocaleString（“en-IN”）

就不起作用了。另外，我想在INR货币样式中显示逗号。i、 e 12,25789

以下是我的代码：

<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引导

我以前遇到过这种情况。您可以做的是将

handlechangevalue

函数中的输入类型限制为仅数字。如果出现任何其他字符，则放弃/忽略它

大概是这样的：

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

// 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, '');

---

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

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

// 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, '');

（如果您的输入看起来像

两位数/逗号/两位数/逗号/三位数

，但这很容易更改。） 然后，您可以将结果转换为数字，然后保存到状态并返回到逗号版本以显示用户

此外，我将在输入字段上使用文本类型，并使用基于regexp的验证器。 我在约会的时候用了类似的方法