处理潜在的空白

Question

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

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

请让我知道这里究竟有什么不正确，我使用了React的documentaiton https://reactjs.org/docs/refs-and-the-dom.html 但我想我在这里做错了什么。以下是范围片段

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

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

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

Answer 1

产生错误的原因是类型定义表示输入可以是null或HTMLInputElement

您可以在"strict": false

中设置tsconfig.json

或者您可以强制输入为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" />

Answer 2

这确实是由你正确和值得称道的使用引起的：

HTMLElement | null

设定了一些规则，包括所有重要规则：

“strictNullChecks”：“true”

处理潜在的空白

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

在下面的示例中，if语句充当类型保护，因此HTMLElement的类型缩小为const elem = document.getElementById('test'); if (elem) { elem.innerHTML = 'Type here is HTMLElement, not null'; }。

HTMLElement

处理HTML元素类型

要将类型从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);
}

更新后的类型保护呼叫如下所示：

{{1}}

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

输入＆＃39; null＆＃39;不能分配给＆＃39; HTMLInputElement＆＃39; ReactJs

3 个答案:

处理潜在的空白

处理HTML元素类型