How to put comma separator in input field in reactjs?

Question

i have a form where i show previous field value in input tag. But, as i put type=number. then my .toLocaleString("en-IN") would'nt work.Also, i want to show comma in INR currency styles. i.e 12,25,789

Following is my code:

<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 been using react-bootstrap

knightburton · Accepted Answer · 2019-03-22 21:37:40Z

3

It's not clear for me where you want to use the comma separated values but you can change between styles with the help of regexp and replace. Something like this:

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

(If your input is looks like two digits / comma / two digits / comma / three digits but this can be changed easly ofc.) Then you can convert the result to number before save into the state and the back to the comma version to display the user.

Also, I would use a text type on the input field an a regexp based validator. I'm using similar in case of dates.

edited Mar 22, 2019 at 21:37

answered Mar 22, 2019 at 21:26

knightburton

1,16411 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsdeveloper · Accepted Answer · 2019-03-21 21:35:16Z

-1

I've come across this before. What you can do is restrict the type of input in your handlechangevalue function to numbers only. If any other character appears then discard/ignore it.

Something like this:

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

answered Mar 21, 2019 at 21:35

jsdeveloper

4,0751 gold badge18 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to put comma separator in input field in reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related