N
N
Ninja Mate2019-02-06 11:29:13
JavaScript
Ninja Mate, 2019-02-06 11:29:13

How to set input type in react-bootstrap TypeScript?

What is the difference between normal input and react-rootstrap FormControl?
Can't set typing for event

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

  state = {
    searchInput: ""
  }

 // Работает для обычного input 
  searchInputSimple = (e: React.FormEvent<HTMLInputElement>): void => {
    const { getSearch } = this.props
    this.setState(
      { searchInput: e.currentTarget.value },
      (): void => getSearch(this.state.searchInput)
    )
  }

  // Нудно использовать с FormControl. Что поставить вместо 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"
        />
      </>
    )
  }
}

If looking for 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;
}

How to understand from this what type to pass to searchInput?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel Ivanov, 2019-02-06
@oxotnik239

FormEvent has the following type:
Try substituting a FormControl

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question