React.JS c'.l'état n'est pas défini

J'ai actuellement ce composant dans React.JS qui affiche toutes les Images passées dans un tableau et onMouseOver montre un bouton ci-dessous. J'ai raboté sur l'utilisation de setState pour vérifier la variable stationnaire si c'est vrai ou faux et actionnez le bouton de l'image en conséquence cependant, je reçois l'erreur suivante:

Uncaught TypeError: Cannot read property 'état' undefined

var ImageList = React.createClass({
getInitialState: function () {
    return this.state = { hover: false };
},
getComponent: function(index){
      console.log(index);
      if (confirm('Are you sure you want to delete this image?')) {
          //Save it!
      } else {
          //Do nothing!
      }    
},
mouseOver: function () {
    this.setState({hover: true});
    console.log(1);
},

mouseOut: function () {
    this.setState({hover: false});
    console.log(2);
},
render: function() {
var results = this.props.data,
  that = this;
return (
  <ul className="small-block-grid-2 large-block-grid-4">
    {results.map(function(result) {
      return(
              <li key={result.id} onMouseOver={that.mouseOver} onMouseOut={that.mouseOut} ><img className="th" alt="Embedded Image" src={"data:" + result.type + ";"  + "base64," + result.image} /> <button onClick={that.getComponent.bind(that, result.patientproblemimageid)} className={(this.state.hover) ? 'button round button-center btshow' : 'button round button-center bthide'}>Delete Image</button></li>
      )      
    })}
  </ul>
);
}

});
S'il vous plaît mettez les pièces essentielles du code dans le corps de la question.
J'ai donné l'essentiel de code dans le pastebin havn pas donné le code complet.
Vous ne me comprenez pas. C'est une mauvaise pratique de fournir un lien vers le code. Juste de l'intégrer dans la question de la place.
mon mauvais ajouté.

OriginalL'auteur Gaurav Jagtap | 2015-07-26

  1. 5

    Vous obtenez l'erreur parce que vous voulez enregistrer la référence à this dans un that variable qui vous êtes en utilisant pour faire référence à vos gestionnaires d'événements, mais vous ne l'utilisez PAS dans le ternaire expression pour déterminer la className pour la button élément.

    votre code:

    <button
  onClick={ that.getComponent.bind(that, result.patientproblemimageid) } 
  className={ (this.state.hover) ? //this should be that 
    'button round button-center btshow' : 
    'button round button-center bthide'}>Delete Image
</button>

    Lorsque vous modifiez this.state.hover à that.state.hover vous n'obtiendrez pas l'erreur.

    Sur une note de côté, au lieu de stocker la référence à this dans un that variable vous pouvez simplement passer un paramètre de contexte à la map() méthode.

    results.map(function (result) {
  //
}, this);

    OriginalL'auteur danillouz

  2. 3

    Dans l'ES5 format vous ne pouvez pas définir cette.l'état directement

    var ImageList = React.createClass({
getInitialState: function () {
 return { hover: false };
},
render : function(){
return(<p>...</p>);
});

    Toutefois, avec les nouveaux ES6 syntaxe que vous pouvez gérer cela:

    class ImageList extends React.Component{
constructor (props) {
  super(props);
  this.state = {hover : false};
}
render (){ ... }
}

    OriginalL'auteur max_new