在 react-select 的 Creatable 中限制输入为正数

Question

我正在尝试将 react-select 的 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 的值。此外，如果我尝试使用退格键删除符号，它也不起作用。知道如何将输入限制为仅正数吗？

Here is a codesandbox example to see what is happening.

Answer 1

react-select 库为我们提供了一个 onKeyDown 道具，它将事件传递给回调 function.So，我所要做的就是使用这个道具，然后如果用户输入了我不希望他们输入的字符，则防止默认。

Codesandbox example

在 react-select 的 Creatable 中限制输入为正数

Restrict input to positive numbers in react-select's Creatable

reactjs

react-select