Какой тип я должен использовать для ввода события response-bootstrap с TypeScript? - PullRequest
Новая
       4

Какой тип я должен использовать для ввода события response-bootstrap с TypeScript?

0 голосов
/ 06 февраля 2019

Я использую lib реагирующий на загрузку и мне нужно использовать компонент ввода.Я знаю, как набрать простой ввод, но у меня проблема с FormControl

class Search extends Component<Props, { searchInput: string }> {

      static defaultProps = {}

      state = {
        searchInput: ""
      }

     // This one works for input 
      searchInputSimple = (e: React.FormEvent<HTMLInputElement>): void => {
        const { getSearch } = this.props
        this.setState(
          { searchInput: e.currentTarget.value },
          (): void => getSearch(this.state.searchInput)
        )
      }

      // for FormControl. What can I use exept any?
      searchInput = (e: React.FormEvent<any>): void => {
        const { getSearch } = this.props
        this.setState(
          { searchInput: e.currentTarget.value },
          (): void => getSearch(this.state.searchInput)
        )
      }

      render() {
        const { searchInput } = this.state
        return (
          <>
            <InputGroup className="mb-3">
              <FormControl placeholder="Search" value={searchInput} onChange={this.searchInput} />
            </InputGroup>

            <input
              placeholder="Search"
              value={searchInput}
              onChange={this.searchInputSimple}
              className="form-control"
            />
          </>
        )
      }
    }

Я пытался понять и посмотреть на FormControl.d.ts

import Feedback from './Feedback';

import { BsPrefixComponent } from './helpers';

interface FormControlProps {
  innerRef?: React.LegacyRef<this>;
  size?: 'sm' | 'lg';
  plaintext?: boolean;
  readOnly?: boolean;
  disabled?: boolean;
  value?: string;
  onChange?: React.FormEventHandler<this>;
  type?: string;
  id?: string;
  isValid?: boolean;
  isInvalid?: boolean;
}

declare class Form<
  As extends React.ReactType = 'input'
> extends BsPrefixComponent<As, FormControlProps> {
  static Feedback: typeof Feedback;
}

Если я использую только HTMLInputElement Я получаю эту ошибку

Ошибка типа: Тип '(e: FormEvent) => void' нельзя назначить для типа '(событие: FormEvent & FormControlProps >>) => void'.Типы параметров 'e' и 'event' несовместимы.Тип «FormEvent & FormControlProps >>» нельзя назначить типу «FormEvent».Введите 'Pick, HTMLInputElement>, "children" |"форма" |"стиль" |"название" |"шаблон" |"реф" |"ключ" |"defaultChecked" |... еще 268 ... |"width"> & BsPrefixProps <...> & FormControlProps 'не хватает следующих свойств из типа' HTMLInputElement ': выравнивание, автозаполнение, автофокус, dirName и еще 245.

Как это сделатьэто и не использовать какой-либо тип?Должен ли это быть псевдоним HTMLInputElement и что-то еще?

1 Ответ

0 голосов
/ 06 февраля 2019

Вы ищете React.ChangeEvent, а не React.FormEvent: 

searchInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const { value } = e.currentTarget;
    const { getSearch } = this.props;
    this.setState(state => ({
        ...state,
        searchInput: value
    }), (): void => getSearch(this.state.searchInput))
}
...