Adding onChange script to input box in React

Question

I currently have an input box component and I'd like to add a script to prevent all input except for numbers.

function onChangeHandler(e: React.ChangeEvent) {
  this.value.replace(/(?![0-9])./gmi,'');
}

export function Input(props: InputProps) {
  const {
    className,
    ...restProps
  } = props;

  return (
    <input
      {...restProps}
      className={cx([inputStyles])}
      type={inputType}
      onChange={e => onChangeHandler(e)}
    />
  );
}

Currently this setup doesn't work because I get the following error from onChangeHandler: 'this' implicitly has type 'any' because it does not have a type annotation.

How can I make this work?

Note: I don't want to use type=number

zilijonas · Accepted Answer · 2019-07-10 16:32:20Z

1

You are trying to access this scope when there does not exist any. It's not a class, it's a function, this is not required here.

Your code should look like this (though, you could move value state to your parent component and pass it through props):

export function Input(props: InputProps) {
  const [value, setValue] = React.useState('');  

  const {
    className,
    ...restProps
  } = props;

  const onChangeHandler = (e: React.ChangeEvent) => {
    setValue(e.target.value.replace(/(?![0-9])./gmi,''));
  }

  return (
    <input
      {...restProps}
      className={cx([inputStyles])}
      type={inputType}
      value={value}
      onChange={onChangeHandler}
    />
  );
}

answered Jul 10, 2019 at 16:32

zilijonas

3,8153 gold badges32 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

Adding onChange script to input box in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related