typescript - Typ 'null' kan inte tilldelas typen 'HTMLInputElement' ReactJs

Jag försöker referera data i ReactJS tillsammans med TypeScript. När jag gör detta får jag följande fel

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

Vänligen låt mig veta vad som är fel här, jag använde dokumentationen från React https://reactjs.org/docs/refs-and-the-dom.html men jag tror att jag gör något fel här. Nedan är kodsnutten.

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

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

Någon idé om vad jag kan missa här?

Svar #1

Felet uppstår eftersom typspecifikationerna säger att input kan vara null eller en HTMLInputElement

Du kan ställa in "strict": false i din tsconfig.json

Eller så kan du tvinga inputen att vara av typen HTMLInputElement

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

Detta sätt är också giltigt (med användning av definitiva tilldelningspåståenden (typescript >= 2.7))

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

Svar #2

Detta orsakas faktiskt av din korrekta och lovvärda användning av:

"strict": "true"

Vilket fastställer några regler inklusive den mycket viktiga:

"strictNullChecks": "true"

Hantera potentiella null-värden

Det korrekta sättet att hantera detta är att kontrollera att elementet faktiskt inte är null, eftersom nästan varje metod du använder för att söka efter ett element kan misslyckas med att hitta ett.

I exemplet nedan fungerar if-satsen som en typvakt, så typen HTMLElement | null begränsas till endast HTMLElement.

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

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

Hantera HTML-elementtyper

För att begränsa typen från HTMLElement till HTMLInputElement kan du ta ett "jag vet bättre"-förhållningssätt och använda en typförsäkran (vilket gör en klass av subtila fel möjliga):

const example = <HTMLInputElement> elem;

Eller så kan du använda en anpassad typvakt för att göra det korrekt, exemplet nedan tar HTMLElement | null och begränsar det till HTMLInputElement om det inte är null, och har korrekt taggnamn:

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

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

Det uppdaterade anropet av typkontrollen ser ut så här:

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

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

Relaterade artiklar