“ +不能分配给类型'IntrinsicAttributes&RefAttributes <htmlinputelement>'的React + Typescript问题。”。

时间:2019-02-21 12:16:29

标签: reactjs typescript

Input组件代码:

import * as React from 'react';
import CSSModules from 'react-css-modules';


interface ComponentProps {
    innerRef?: React.RefObject<HTMLInputElement>;
    onKeyPress?: (e: any) => void;
    onKeyDown?: (e: any) => void;
    onFocus?: (e: any) => void;
}


@CSSModules(require('./styles.scss'), { allowMultiple: true })
class Input extends React.Component<ComponentProps> {
    render() {
        let {innerRef, ...props } = this.props;

        return (
            <input {...props} styleName="input" ref={innerRef} />
        );
    }
}

export default React.forwardRef((props, ref?: React.RefObject<HTMLInputElement>) => <Input innerRef={ref} {...props}/>);

使用此组件:

<Input 
    ref={this.inputRef}
    onKeyPress={(e) => { e.preventDefault(); }}
    onKeyDown={(e) => { e.preventDefault(); }}
    onFocus={this.onInputFocus.bind(this)}
    placeholder={placeholder}
/>

我有以下错误:

Type '{ ref: RefObject<HTMLInputElement>; onKeyPress: (e: any) => void; onKeyDown: (e: any) => void; onFocus: any; placeholder: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLInputElement>'.
  Property 'onKeyPress' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLInputElement>'

0 个答案:

没有答案