"<i>Type problem &quot;... is not assignable to type &#39;IntrinsicAttributes &amp; RefAttributes<\/i>类型问题“......不可分配给类型&#39;IntrinsicAttributes &amp; RefAttributes<\/b><HTMLInputElement> <i>&#39;.&quot;<\/i> ’。”<\/b>"

Question

我正在尝试使用连接到搜索按钮的单个输入字段来验证使用 Formik 和 Typescript 的输入。

这就是我想要实现的目标：

当用户键入输入时，我只想接受数字，但我收到这两条似乎相关的错误消息：

消息 1：

"类型'{ id: string; name: string; label: string; placeholder: string; onChange: (e: ChangeEvent) => void; value: any; type: "text"; onKeyPress: (e: any) => any; }' 不可分配给类型“IntrinsicAttributes & Props & RefAttributes”。\\n

消息 2：

'IntrinsicAttributes & Props & RefAttributes' 类型上不存在属性 'onKeyPress'。",

我的界面和我尝试访问函数 handleKeyPress 的方式有什么问题？

interface Props {
    innerRef?: React.RefObject<HTMLInputElement>;
    onKeyPress?: (e: number) => void;
    testId?: string;
    startIndex?;
    children?: ReactNode;
    segmentType?: SegmentType;
    invoiceId?: string;
    segmentId?: string;
    pageId?: number;
}


export const DcaInvoicesPage: React.FC<Props> = ({ testId = 'Invoices' }) => {
    const [segmentInput, setSegmentInput] = useState<number>();
    const [input, setInput] = useState(null);
    const [invoiceId, setInvoiceId] = useState('');
    const [segmentId, setSegmentId] = useState<number>();
   
    const NumbersOnlyTextField = e => {
        const handleKeyPress = () => {
            const key = e.key;
            const regex = /[0-9]|\./;
            if (!regex.test(key)) {
                e.preventDefault();
            } else {
                console.log('You pressed a key: ' + key);
            }
        };
    };


return (

 <FlexItem flex={1.5}>
                            <FormikInput
                                id={`reportName`}
                                name={`reportName`}
                                label={'Invoice number'}
                                placeholder={'Search for an existing invoice number'}
                                onChange={e => {
                                    setInput(e.target.value);
                                }}
                                value={input}
                                type={'text'}
                                onKeyPress={e => handleKeyPress(e)}
                            />
                        </FlexItem>
                        <FlexItem className="flex-toolbar-button">
                            <StyledToolbarButton
                                size="normal"
                                buttonStyling="primary"
                                onClick={() => {
                                    setSegmentId(segmentInput);
                                    setInvoiceId(input);
                                }}
                                disabled={!segmentInput || !input}
                            >
                                Search
                            </StyledToolbarButton>
                        </FlexItem>