Reactjs 如何在函数中读取此.props

我是ES6的reactjs新手，问题是我无法读取onDelete（）函数中的'this.props.productId'属性，这是错误：

DeleteProductComponent.js:15 Uncaught TypeError:无法读取null的'props'属性

有人能给我一个最佳解决方案或告诉我做错了什么吗？多谢各位

 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; 

import React，{Component}来自'React'；
类DeleteProductComponent扩展组件{
componentDidMount（）{
$（'.页眉h1'）。文本（'删除产品'）；
}
onDelete（）{
var id=this.props.productId；
$.ajax({
url:“http://localhost/my-app/public/delete.php",
类型：“POST”，
contentType:'应用程序/json'，
数据：JSON.stringify（{'id'：id}），
成功：功能（响应）{
this.props.changeAppMode（'read'）；
}.绑定（此），
错误：函数（xhr、resp、text）{
//在控制台中显示错误
日志（xhr，resp，text）；
}
});
}
//在这里处理保存更改按钮
//单击“处理保存更改”按钮
渲染（）{
返回(
你确定吗？
对
this.props.changeAppMode（'read'）}
className='btn btn primary'>否
);
}
} 
导出默认的DeleteProductComponent；

您在

类中需要将
此
绑定到
类
。
最好在
类的构造函数中执行此操作，因为它将仅在类第一次实例化时运行，而不是在render方法中执行此操作，该方法将在每次渲染时创建处理程序的新实例。

因此，您应该在
构造函数中执行此操作：

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

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

通过两种方式将
onDelete（）
函数绑定到组件：

在
构造函数中：

class DeleteProductComponent extends Component {

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

  componentDidMount() {}

  onDelete() {}

  render() {}

}

或对
onDelete（）
使用ES6语法（然后它将自己绑定到组件）：

可能重复您忘记了绑定onDelete函数，请使用：
@MayankShukla这将起作用，但在render方法中绑定它是一种不好的做法，因为它会在每次渲染时创建一个新实例，对性能不利。您说得很对，我完全忘记了这一部分，非常感谢！。感谢您的回答，以及两种方法的建议，它工作得非常完美！很高兴你让它工作了^^！你可以用reactjs向我查询更多问题，如果可以，我会尽力帮助你！这是什么.props.changeAppMode？
 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);
        }
    });
  }