How to enter only an integer value in TextInput with type="number"

Question

I want to use material-UI TextInput to enter only integer values (not decimal values). I used the TextInput as follows, but it still allows the decimal number.

How can I do that?

<TextField id="outlined-value" 
           type="number"
           label="Value" 
           className={classes.standartInputMargin}
           value={this.state.allowedValue}
           margin="normal" 
           variant="outlined"
           onChange={(event) => Number.isInteger(event.target.value) 
               ? this.setState({ allowedValue: event.target.value }) 
               : null} />

use converted value in setState

xadm
– xadm

2018-09-26 12:09:02 +00:00
Commented Sep 26, 2018 at 12:09 — xadm
– xadm, Commented Sep 26, 2018 at 12:09

Colin Burke · Accepted Answer · 2018-09-26 12:20:27Z

3

You're passing the raw value to setState, rather than the integer value. Since your input only accepts numbers, you can just check for decimal places.

onChange = (e) => {
  const { value } = e.target;

  if (value.match('.')) { 
    this.setState({ value: parseInt(value) })
  } 

  return null;
}

Alternatively, if you just have a regular input, something like this would only allow you to enter integers.

onChange = e => {
  const { value } = e.target;
  const parsedInt = parseInt(value);

  if (parsedInt) {
    this.setState({ value: parsedInt });
  }

  return null;
};

edited Sep 26, 2018 at 12:20

answered Sep 26, 2018 at 12:14

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

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

3 Comments

Andrea Reina Over a year ago

This will reject an input of 0, which may not be what you want. You can use Number.isFinite(parsedInt) instead.

Colin Burke Over a year ago

@AndreaReina are you sure? Can't seem to replicate here: codesandbox.io/s/l20v65z129

Andrea Reina Over a year ago

It accepts an initial value of 0 because that doesn't go through the change handler. Try setting it to another number then back to 0.

Vivek Goel · Accepted Answer · 2020-06-15 12:59:05Z

1

const setValueHandler = (e) => {
    setValue(e.target.value.replace(/[^0-9]/g, ''));
  }

answered Jun 15, 2020 at 12:59

Vivek Goel

8022 gold badges12 silver badges21 bronze badges

1 Comment

Vivek Goel Over a year ago

Need to remove type="Number" from TextField for this.

Simas.B · Accepted Answer · 2018-09-26 12:09:13Z

0

Easiest way i think is to parse value in onChange method.

const NON_DIGIT = '/[^\d]/g';
...
onChange(event) {
    const { value } = event.target;
    const intValue = parseInt(value.toString().replace(NON_DIGIT, ''));

    this.setState({ value: intValue });
}

answered Sep 26, 2018 at 12:09

Simas.B

7531 gold badge14 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to enter only an integer value in TextInput with type="number"

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related