Question

我正在使用react-bootstrap 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'不是可分配给类型'（event：FormEvent＆FormControlProps >>）=> void'。种类参数“ e”和“事件”不兼容。类型'FormEvent＆FormControlProps >>'不能分配给该类型 'FormEvent'。输入“选择”， HTMLInputElement>，“子级” | “表格” | “样式” | “标题” | “图案” | “参考” | “钥匙” | “ defaultChecked” | ... 268更多... | “ width”>＆ BsPrefixProps <...>和FormControlProps'缺少以下内容 “ HTMLInputElement”类型的属性：对齐，自动完成，自动对焦，dirName和另外245个。

那么该怎么做而不使用任何类型呢？应该是别名HTMLInputElement还是更多？

Answer 1

您要查找的是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))
}

Answer 2

使用select max(case when id = 1 then value end) as mail, max(case when id = 2 then portal end) as portal, max(case when id = 3 then terrain end) as terrain from ;代替any。

FormControl & FormControlProps

取自此comment on the issue in @types/react-bootstrap。

我应该使用哪种类型的TypeScript输入react-bootstrap事件？

2 个答案: