React-Form(v7) Reactstrap 与 Typescript答案

【问题标题】：React-Form(v7) Reactstrap with TypescriptReact-Form(v7) Reactstrap 与 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

中遇到同样的错误

【问题讨论】：

标签： reactjs typescript redux-form react-redux-form reactstrap

【解决方案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>

【讨论】：