【问题标题】：Type 'null' is not assignable to type 'HTMLInputElement' ReactJs类型“null”不可分配给类型“HTMLInputElement”ReactJs
【发布时间】：2018-07-07 09:46:23
【问题描述】：

我正在尝试将数据与 typescript 一起引用到 reactJS 中。这样做时，我遇到了错误

Type 'null' is not assignable to type 'HTMLInputElement'

请让我知道这里有什么不正确的地方，我使用了 React 的文档 https://reactjs.org/docs/refs-and-the-dom.html 但我认为我在这里做错了什么。下面是范围sn-p

  class Results extends React.Component<{}, any> {
  private textInput: HTMLInputElement;
  .......
  constructor(props: any) {
    super(props);

    this.state = { topics: [], isLoading: false };

    this.handleLogin = this.handleLogin.bind(this);
    }

     componentDidMount() {.....}

    handleLogin() {
    this.textInput.focus();
    var encodedValue = encodeURIComponent(this.textInput.value);
   .......
}

  render() {
    const {topics, isLoading} = this.state;

    if (isLoading) {
        return <p>Loading...</p>;
    }

    return (
        <div>
              <input ref={(thisInput) => {this.textInput = thisInput}} type="text" className="form-control" placeholder="Search"/>
              <div className="input-group-btn">     
                           <button className="btn btn-primary" type="button" onClick={this.handleLogin}>

   ...............

知道我在这里可能缺少什么吗？

【问题讨论】：

只有在更改路线时才会发生，我的意思是在卸载组件时？
@MayankShukla 是的。
也可以这样写：private textInput: HTMLInputElement |空；

标签： reactjs typescript reference

【解决方案1】：

产生错误是因为类型定义说输入可以是null 或HTMLInputElement

您可以在tsconfig.json 中设置"strict": false

或者您可以强制输入为HTMLInputElement 类型

<input ref={thisInput => (this.textInput = thisInput as HTMLInputElement)} type="text" className="form-control" placeholder="Search" />

这种方式也有效(using definite assignment assertions (typescript >= 2.7))

<input ref={thisInput => (this.textInput = thisInput!)} type="text" className="form-control" placeholder="Search" />

【讨论】：

感谢您的建议，我使用了“thisInput as HTMLElement”的方法，但现在它给出了另一个错误。说 .." 类型 'HTMLElement' 中缺少属性 'accept'"
我的错，我没有注意到它是HTMLInputElement。我已经更新了答案
只是指出示例中的错字。 HTMLEInputlement 应该是 HTMLInputElement。 @lleon

【解决方案2】：

这确实是由您正确且值得称赞的使用造成的：

"strict": "true"

其中设置了一些规则，包括所有重要的：

“strictNullChecks”：“真”

处理潜在的空值

处理此问题的正确方法是检查该元素实际上是否为空，因为您用于查询元素的几乎每种方法都可能找不到一个。

在下面的示例中，if 语句充当类型保护，因此 HTMLElement | null 的类型被缩小为 HTMLElement。

const elem = document.getElementById('test');

if (elem) {
  elem.innerHTML = 'Type here is HTMLElement, not null';
}

处理 HTML 元素类型

要将类型从 HTMLElement 缩小到 HTMLInputElement，您可以采用“我知道得更好”的方法并使用类型断言（使一类细微错误成为可能）：

const example = <HTMLInputElement> elem;

或者您可以使用自定义类型保护来正确执行此操作，以下示例采用 HTMLElement | null 并将其缩小为 HTMLInputElement 如果它不为空，并且具有正确的标签名称：

function isInputElement(elem: HTMLElement | null): elem is HTMLInputElement {
  if (!elem) {
    // null
    return false;
  }

  return (elem.tagName === 'INPUT')
}

更新后的类型保护调用如下所示：

const elem = document.getElementById('test');

if (isInputElement(elem)) {
  console.log(elem.value);
}

【讨论】：

"commendable" ...我个人认为这是一个杯子游戏+1

【解决方案3】：

我在使用 ref 之前使用 if 条件解决了反应

  if (this.ref.current) {

      this.editor = monaco.editor.create(
          this.ref.current,
          { automaticLayout: true }
      );

      monaco.editor.setTheme('vs-dark');
      this.editor.setModel(this.model);
  }

【讨论】：

【解决方案4】：

我在谷歌搜索时发现的一个简单的解决方案，足以解决这个问题。

【讨论】：