如何在函数中阅读this.props

Question

我是 ES6 反应的新手，问题是我无法读取 onDelete (( 函数中的"this.props.productId"属性，这是错误：DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null谁能给我一个最佳解决方案或告诉我我做错了什么？谢谢

 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

通过 2 种方式将onDelete()函数绑定到组件：

在constructor：

class DeleteProductComponent extends Component {
  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
  }
  componentDidMount() {}
  onDelete() {}
  render() {}
}

或者使用 ES6 的语法进行onDelete()(然后它将自行绑定到组件(：

 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

您需要

class将this绑定到class。最好的地方是在class的构造函数中，因为它只会在类第一次实例化时运行，而不是在渲染方法中执行此操作 女巫将在每次渲染上创建处理程序的新实例。
所以你应该在constructor中这样做：

    class DeleteProductComponent extends Component {
        constructor(props, context) {
            super(props, context);
            this.onDelete = this.onDelete.bind(this);
        }
    //.... rest of the class