event.which is undefined in react

Question

I am trying to restrict my key input in the text field to numbers or backspace or space so I am checking before I set state and preventing default behavior of event in other cases but I am not able to locate event.which property of event or keyCode for that matter.
I tried event.persist() to see but still the same there is no property by the name of which in event.
There is a which in nativeEvent of event but it is always 0.

Here is the component that is there in my app.js I am using textfield of material-ui instead of normal input.

MobileNumber.tsx:

import React from 'react';
import { TextField } from '@material-ui/core';


export interface MobileNumberProps {

}

export interface MobileNumberState {
    value: any
}

class MobileNumber extends React.Component<MobileNumberProps, MobileNumberState> {
    state = {
        value: 0,
    }
    handleChange = (value: any) => {
        this.setState({ value: value })
    }
    render() {
        return (
            <TextField
                type="number"
                onChange={(event: any) => {
                    event.persist();
                    console.log('event is ', event);
                    if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
                        console.log('stopped')
                        event.preventDefault();
                    }
                    else {
                        console.log('event which is ', event.which);
                        console.log('allowed');
                        let value = event.target.value
                        this.handleChange(value);
                    }
                }}
                value={this.state.value}
            />
        );
    }
}

export default MobileNumber;

Answer 1

Two possible issues:

1. which and keyCode are both deprecated, so it's not entirely surprising that React's synthetic events don't have them. The modern property is key.

   For example, this:

   if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
   

   could be written like this:

   if (event.key !== "Backspace" && event.key !== "" && (event.key < "0" || event.key > "C")) {
   

2. Note that the change event is a plain Event, not KeyboardEvent. It doesn't have key-specific information because it's not a key-specific event. Use a key event instead if you need to know what key was pressed (keydown is probably what you want in this case).

Side note: There's no reason to call persist in your example, you don't try to use the properties after the event handler returns. In general, avoid persist. If you did need key after the handler returned, you'd grab it to a local variable instead:

const { key } = event;
// ...use `key`...