reactjs - 如何在函数中读取 this.props

Question

我是 ES6 的 ReactJS 新手，问题是我无法读取 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

通过两种方式将 onDelete() 函数绑定(bind)到组件:

在构造函数中:

class DeleteProductComponent extends Component {

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

  componentDidMount() {}

  onDelete() {}

  render() {}

}

或者使用ES6的语法来实现onDelete()(然后它会自己绑定(bind)到组件):

 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);
        }
    });
  }