Wie zu lesen this.props in einer Funktion

Question

Ich bin neu zu reactjs mit ES6, das Problem ist, dass ich die Eigenschaft 'this.props.productId' in der onDelete() -Funktion nicht lesen kann, das ist der Fehler: DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null kann mir jemand eine optimale lösung geben oder mir sagen was ich falsch mache? Danke

import React, { Component } from 'react'; 

    class DeleteProductComponent extends Component { 

    componentDidMount() { 

     $('.page-header h1').text('Delete Product'); 

     } 

onDelete(){ 

var id = this.props.productId; 

     $.ajax({ 
      url: "http://localhost/my-app/public/delete.php", 
      type : "POST", 
      contentType : 'application/json', 
      data : JSON.stringify({'id' : id}), 
      success : function(response) { 
       this.props.changeAppMode('read'); 
      }.bind(this), 
      error: function(xhr, resp, text){ 
       // show error in console 
       console.log(xhr, resp, text); 
      } 
     }); 
    } 

    // handle save changes button here 
    // handle save changes button clicked 

     render() { 

     return (
      <div className='row'> 
       <div className='col-md-3'></div> 
       <div className='col-md-6'> 
        <div className='panel panel-default'> 
         <div className='panel-body text-align-center'>Are you sure?</div> 
         <div className='panel-footer clearfix'> 
          <div className='text-align-center'> 
           <button onClick={this.onDelete} 
            className='btn btn-danger m-r-1em'>Yes</button> 
           <button onClick={() => this.props.changeAppMode('read')} 
            className='btn btn-primary'>No</button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div className='col-md-3'></div> 
      </div> 
     ); 
     } 

    } 
    export default DeleteProductComponent; 

Answer 1

Bind onDelete() Funktion auf die Komponente durch 2 Möglichkeiten:

Im constructor:

class DeleteProductComponent extends Component { 

    constructor(props) { 
    super(props); 
    this.onDelete = this.onDelete.bind(this); 
    } 

    componentDidMount() {} 

    onDelete() {} 

    render() {} 

} 

Oder ES6 Syntax verwenden für onDelete() (dann wird es an die Co gebunden sein mponent von selbst):

onDelete =() => { 

    var id = this.props.productId; 

    $.ajax({ 
     url: "http://localhost/my-app/public/delete.php", 
     type : "POST", 
     contentType : 'application/json', 
     data : JSON.stringify({'id' : id}), 
     success : function(response) { 
      this.props.changeAppMode('read'); 
     }.bind(this), 
     error: function(xhr, resp, text){ 
      // show error in console 
      console.log(xhr, resp, text); 
     } 
    }); 
    } 

Answer 2

Sie in class s Sie this zum class binden müssen. Der beste Ort, um es zu tun ist im Konstruktor der class, da es nur das erste Mal die Klasse instanziieren wird, anstatt es innerhalb der Render-Methode zu tun, die eine neue Instanz des Handlers auf jedem Render erstellen wird.
So sollten Sie dies tun, in der constructor:

class DeleteProductComponent extends Component { 
     constructor(props, context) { 
      super(props, context); 

      this.onDelete = this.onDelete.bind(this); 
     } 
    //.... rest of the class