React.JS diese.Zustand ist undefiniert

Momentan habe ich diese Komponente in React.JS die zeigt alle Bilder an übergeben, um es in ein array und onMouseOver es zeigt die Schaltfläche unten. Ich wollte mit setState zum überprüfen der variable schweben, wenn es wahr oder falsch ist, und wählen Sie mit der Taste das Bild entsprechend, jedoch bekomme ich immer die folgende Fehlermeldung:

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

});
  • Bitte legen Sie die wesentlichen Stücke der code im body-Bereich der Frage.
  • Ich habe da nur die wichtigsten code im pastebin noch nicht der vollständige code.
  • Sie verstanden mich nicht. Es ist schlechte Praxis, um einen link auf den code. Nur einbetten in die Frage statt.
  • mein bad Hinzugefügt.
InformationsquelleAutor Gaurav Jagtap | 2015-07-26
  1. 5

    Erhalten Sie die Fehlermeldung, weil Sie die Speicherung der Referenz auf this im that variable, die Sie verwenden, um Ihre Referenz event-Handler, aber Sie sind NICHT mit es im ternären Ausdrucks, um zu bestimmen, die className für die button element.

    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 ändern this.state.hover zu that.state.hover Sie nicht die Fehlermeldung erhalten.

    On a side note, statt der Speicherung der Verweis auf this im that variable können Sie einfach übergeben Sie einen context-parameter werden die map() Methode.

    results.map(function (result) {
  //
}, this);
    InformationsquelleAutor danillouz
  2. 3

    In ES5-format können Sie nicht einstellen, dieser.Stand direkt

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

    Jedoch mit neuen ES6-syntax können Sie im wesentlichen die Verwaltung dieses:

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