Блог

У меня есть этот компонент, который, по идее, должен возвращать значение в виде числа, он получает строку:

 // <InputNumber>
import React from 'react';
import NumberFormat, { NumberFormatProps } from 'react-number-format';

export type InputNumberProps = NumberFormatProps;

const InputNumber: React.FC<InputNumberProps> = ({ onChange, ...rest }) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    if (onChange) {
      onChange(event);
    }
  };

  return (
    <NumberFormat {...rest} onChange={handleChange} />
  );
};
 

С помощью этого кода я ничего не делаю с получаемым значением. В настоящее время у меня есть другой вызываемый компонент Main , который используется InputNumber таким образом:

 // <Main>
import React from 'react';
import Container from 'react-bootstrap/Container';

import InputNumber from '../components/InputNumber';

const Main: React.FC = () => {
  const onChange = (val: any) => Number(val.target.value);

  return (
    <Container>
      <InputNumber onChange={onChange} />
    </Container>
  );
};

export default Main;
 

Итак, с реквизитами onChange я фактически меняю string то, что получает от IntegerNumber , и оно возвращает a number , в чем и заключается вся идея.

Итак, мой вопрос в том, как я могу сделать это изменение значений из string в number, но не снаружи IntegerNumber через props onChange ? Я просто хочу использовать и преобразовывать туда строку, которая всегда получает и возвращает числа. InputNumber