web-dev-qa-db-fra.com

getElementById dans React

Obtenir cette erreur pour le moment:

Uncaught TypeError: Cannot read property 'value' of null

J'appelle cela dans ma fonction de rendu ci-dessous:

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>

J'ai aussi essayé de l'appeler ici

componentWillMount: function(){
        var name = document.getElementById('name').value;
      },

Comment puis-je obtenir l'id d'un champ de texte d'entrée et lire cette valeur et m'assurer qu'elle n'est pas nulle?

Je pense que le DOM se charge après avoir essayé de lire l'élément, donc pourquoi il est nul

javascriptreactjsnullgetelementbyid
14
The worm

Vous devez avoir votre fonction dans le cycle de vie componentDidMount car c'est la fonction qui est appelée lorsque le DOM est chargé.

Utilisez refs pour accéder à l'élément DOM

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData} ref = "cpDev1"/>

  componentDidMount: function(){
    var name = React.findDOMNode(this.refs.cpDev1).value;
    this.someOtherFunction(name);
  }

Voir cette réponse pour plus d'informations sur Comment accéder à l'élément dom dans React

13
Shubham Khatri

Vous devrez peut-être effectuer un diff et mettre du code document.getElementById('name') dans une condition, au cas où votre composant ressemblerait à ceci:

// using the new hooks API
function Comp(props) {
  const { isLoading, data } = props;
  useEffect(() => {
    if (data) {
      var name = document.getElementById('name').value;
    }
  }, [data]) // this diff is necessary

  if (isLoading) return <div>isLoading</div>
  return (
    <div id='name'>Comp</div>
  );
}

Si diff n'est pas effectué, vous obtiendrez null.

0
HarshvardhanSharma