React.JS this.state ist undefined

Question

Ich habe derzeit diese Komponente in React.JS, die alle Bilder zeigt, die an sie in einem Array übergeben werden und onMouseOver es zeigt eine Schaltfläche unten. Ich gehobelt setState über die Verwendung der Variable schweben zu überprüfen, ob wahr oder falsch ist und drücken Sie die Taste des Bildes entsprechend aber ich folgende Fehlermeldung erhalte:

Uncaught TypeError: Cannot read property 'state' of 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> 
); 
} 

}); 

Answer 1

Sie den Fehler erhalten, weil Sie speichern der Verweis auf this in einer that Variable, die Sie verwenden, um auf Ihre Ereignishandler zu verweisen, aber Sie verwenden es NICHT im ternären Ausdruck, um das className für das button Element zu bestimmen.

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> 

Wenn Sie this.state.hover ändern that.state.hover Sie nicht den Fehler.

Auf einer Seite zur Kenntnis, statt den Verweis auf this in einer that Variable speichern Sie können sich einfach den Ball ein Kontextparameter auf die map()method.

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

Answer 2

In ES5 Format, das Sie nicht this.state direkt

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

jedoch mit neuer ES6 Syntax festlegen können Sie dies im Wesentlichen verwalten:

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