React.JS this.state non è definito

Question

Attualmente questo componente è in React.JS che mostra tutte le immagini passate in una matrice e onMouseOver mostra un pulsante in basso. Ho piallato sull'uso setState per controllare il passaggio del mouse variabile se è vero o falso e spostare il pulsante di quell'immagine di conseguenza tuttavia continuo a ricevere il seguente errore:

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

Si ottiene l'errore perché si sta memorizzare il riferimento a this in una variabile that che si sta utilizzando per fare riferimento ai gestori di eventi, ma NON lo si utilizza nell'espressione ternaria per determinare l'elemento button per l'elemento className.

il tuo codice:

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

Quando si cambia this.state.hover a that.state.hover non sarà possibile ottenere l'errore.

Su un lato nota, invece di memorizzare il riferimento a this in una variabile that è possibile semplice passaggio di un parametro di contesto al map()method.

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

Answer 2

In formato ES5 non è possibile impostare direttamente this.state

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

Tuttavia, con nuova sintassi ES6 è possibile gestire in sostanza questo:

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