Ограничить ввод положительными числами в Creatable реагирующего выбора

Question

Я пытаюсь использовать Creatable реагирующего выбора для поля ввода типа номер. Код ниже.

import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Creatable from "react-select/creatable";
import  { components } from 'react-select';


const Input = props => {
  if (props.isHidden) {
    return <components.Input {...props} />;
  }
  return (
    <div>
      <Tooltip content={'Custom Input'}>
        <components.Input {...props} type="number"/>
      </Tooltip>
    </div>
  );
};

const handleInputChange = (value,action) => {
  console.log(value);
  console.log(action);
}

export default () => (
  <Creatable
    closeMenuOnSelect={false}
    components={{ Input }}
    backspaceRemovesValue
    isClearable
    onInputChange={handleInputChange}
  />
);

Когда я набираю a - или e, onInputChange не запускается, и значение Creatable не устанавливается. Также, если я пытаюсь удалить символы, используя клавишу Backspace, это тоже не работает. Любая идея о том, как ограничить ввод только положительными числами?

Вот пример кода и коробки, чтобы увидеть, что происходит.

Answer 1

Библиотека реагировать на выбор предоставляет нам onKeyDown реквизит, который передает событие функции обратного вызова. Итак, все, что мне нужно было сделать, это использовать этот реквизит, а затем запретить использование по умолчанию, если пользователь вводит символ, который я Я не ожидаю их входа.

Пример кодов и ящиков