React-Form(v7) Reactstrap 与 Typescript

Posted 2023-03-23

【中文标题】React-Form(v7) Reactstrap 与 Typescript

【英文标题】：React-Form(v7) Reactstrap with Typescript

【发布时间】：2018-10-23 23:01:23

【问题描述】：

我的打字稿表现得很奇怪，需要帮助来解决它。 我正在尝试将 redux-form(v7) 与 reactstrap

一起使用

Form.tsx

<Field
    type="text"
    component=InputField
/>
<Field
    type="password"
    component=InputField
/>

输入框

import Input from 'reactstrap';
import WrappedFieldProps from 'redux-form/lib/Field';

type Props = 
  type?: string;


const InputField = (props: WrappedFieldProps & Props) => 
  const  type, input  = props;
  return(
    <Input
      type=type
      ...input
    />
  );
;

在这种情况下，我收到了 Typescript 错误：TS2322

    Types of property 'type' are incompatible.
      Type 'string | undefined' is not assignable to type '"number" | "select" | "textarea" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "ch...'.
        Type 'string' is not assignable to type '"number" | "select" | "textarea" | "text" | "hidden" | "color" | "email" | "file" | "radio" | "ch...'.

但如果我将 type?: string 更改为 type?: InputType; ( 类型 from reactstrap import InputType from 'reactstrap/lib/Input'; ) 那么它会解决 InputField 中的问题但后来我在 Form.tsx

中遇到同样的错误

【参考方案1】：

一个老问题，但我也在寻找这个问题的答案。我找到的一些解决方案：

<Input type="text" as any />

或

import  Input  from 'reactstrap';
import  InputType  from 'reactstrap/lib/Input'

let type:InputType = "text"  // You can use Ctrl+Space on VSC for "enum"'d values
<Input type=type />

或

import  Input, InputProps, ButtonProps  from 'reactstrap';

type InputElement = 
  [name:string]:InputProps

type BtnElement = 
  [name:string]:InputProps


let inputElement:InputElement = 

  login: 
    onChange: this.handleChange,
    onKeyDown: this.handleKeydown,
    value: this.state.username,
    type: "text",
    placeholder: "Username",
    name: "username"
  

let btnElement:BtnElement = 
  submitBtn:
    onClick:() => this.submit(),

  


<Input ...inputElement.login />
<Button ...btnElement.submitBtn>Login</Button>