React-Form (v7) Reactstrap с машинописным шрифтом - PullRequest
Новая
       30

React-Form (v7) Reactstrap с машинописным шрифтом

0 голосов
/ 14 мая 2018

Я получил странный текст, действующий странно, и мне нужна помощь, чтобы решить его.
Я пытаюсь использовать redux-form (v7) с реагирующий ремень

Form.tsx 

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

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}
    />
  );
};

В этом случае я получил ошибку при наборе текста: 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; (* type с responsestrap import {InputType} from 'reactstrap/lib/Input'; ) , то это исправит проблему в InputField но тогда я получаю ту же ошибку в Form.tsx

1 Ответ

0 голосов
/ 06 июня 2019

Старый вопрос, но я также искал ответ на этот вопрос.Некоторые решения, которые я нашел: 

<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>
...