如何在函数中读取 this.props答案

【问题标题】：how to read this.props in a function如何在函数中读取 this.props
【发布时间】：2017-05-13 18:53:28
【问题描述】：

我是 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;

【问题讨论】：

Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class的可能重复
你忘了bind onDelete 函数，使用这个：<button onClick={this.onDelete.bind(this)}.... 或使用这样的箭头函数：<button onClick={()=>this.onDelete()}....
@MayankShukla 这会起作用，但将它绑定在渲染方法中是一种不好的做法，因为它会在每次渲染时创建一个新实例，对性能不利。

标签： reactjs null ecmascript-6

【解决方案1】：

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

在constructor：

class DeleteProductComponent extends Component {

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

  componentDidMount() {}

  onDelete() {}

  render() {}

}

或者onDelete()使用ES6的语法（那么它会自己绑定到组件上）：

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

【讨论】：

感谢您的回答，并为两种方法的建议，它工作完美！
很高兴你让它工作了^^！您可以联系我以了解有关 reactjs 的更多问题，如果可以，我会尽力提供帮助！
this.props.changeAppMode 是什么？

【解决方案2】：

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

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

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

【讨论】：

你说的很对，这部分我完全忘记了，非常感谢！