web-dev-qa-db-fra.com

Le type 'null' n'est pas assignable au type 'HTMLInputElement' ReactJs

J'essaie de référencer des données dans reactJS avec TypeScript. En faisant cela, j'obtiens en dessous de l'erreur

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

Veuillez me faire savoir ce qui est exactement incorrect ici, j'ai utilisé la documentation de React https://reactjs.org/docs/refs-and-the-dom.html mais Je pense que je fais quelque chose de mal ici. Voici l'extrait de portée

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

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

Une idée de ce qui me manque peut-être ici?

reactjstypescriptreference
9
Abhinav1singhal

L'erreur est produite car les définitions de types indiquent que l'entrée peut être null ou HTMLInputElement

Vous pouvez définir "strict": false dans votre tsconfig.json

Ou vous pouvez forcer l'entrée à être de type HTMLInputElement

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

Cette méthode est également valide ( en utilisant des assertions d'affectation définies (TypeScript> = 2.7) )

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

Cela est en effet dû à votre utilisation correcte et louable de:

"strict": "true"

Ce qui fixe quelques règles dont les plus importantes:

"strictNullChecks": "true"

Gestion des valeurs nulles potentielles

La bonne façon de gérer cela est de vérifier que l'élément n'est pas en fait nul, car presque toutes les méthodes que vous utilisez pour interroger un élément peuvent ne pas en trouver un.

Dans l'exemple ci-dessous, l'instruction if agit comme un garde de type, donc le type de HTMLElement | null est réduit à seulement HTMLElement.

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

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

Gestion des types d'éléments HTML

Pour restreindre le type de HTMLElement à HTMLInputElement, vous pouvez adopter une approche "Je sais mieux" et utiliser une assertion de type (rendant possible une classe d'erreurs subtiles):

const example = <HTMLInputElement> elem;

Ou vous pouvez utiliser un protecteur de type personnalisé pour le faire correctement, l'exemple ci-dessous prend HTMLElement | null et le réduit à HTMLInputElement s'il n'est pas nul et a le bon nom de balise:

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

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

L'appel de garde de type mis à jour ressemble à ceci:

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

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

J'ai résolu en réagissant en utilisant la condition if avant d'utiliser ref

  if (this.ref.current) {

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

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