如何在函数中读取this.props [英] how to read this.props in a function

问题描述

我很喜欢与ES6进行反应，问题是我无法读取onDelete（）函数中的this.props.productId属性，这是错误： DeleteProductComponent.js ：15未捕获TypeError：无法读取属性props为null 任何人都可以给我一个最佳解决方案或告诉我我做错了什么？谢谢

  import反应，{component}来自'react'; 
 
 class DeleteProductComponent extends Component {
 
 componentDidMount（）{
 
 $（'.page-header h1'）。 ）; 
 
} 
 
 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读取'）; 
} .bind（this），
 error：function（xhr，resp，text）{
 //在控制台中显示错误
 console.log（xhr， resp，text）; 
} 
}）; 
} 
 
 //句柄保存更改按钮
 //句柄保存更改按钮单击
 
 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'> < / div> 
< div className ='panel-footer clearfix'> 
< div className ='text-align-center'> 
< button onClick = this.onDelete} 
 className ='btn btn-danger mr-1em'>是< / button> 
< button onClick = {（）=> this.props.changeAppMode（'read' ）} 
 className ='btn btn-primary'>否< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
< div className ='col-md-3'>< / div> 
< / div> 
）; 
} 
 
} 
导出默认DeleteProductComponent; 
  

解决方案

绑定 onDelete（） / code>通过两种方式对组件进行功能：

在构造函数 ：

  class DeleteProductComponent extends Component {
 
 constructor（props）{
 super （道具）; 
 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读取'）; 
} .bind（this），
 error：function（xhr，resp，text）{
 //在控制台中显示错误
 console.log（xhr， resp，text）; 
} 
}）; 
} 
  

I'm new to reactjs with ES6, the problem is that I can not read the 'this.props.productId' property inside the onDelete () function, this is the error: DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null can anyone give me an optimum solution or tell me what I'm doing wrong? Thank you

 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; 

解决方案

Bind onDelete() function to the component by 2 ways:

In the constructor:

class DeleteProductComponent extends Component {

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

  componentDidMount() {}

  onDelete() {}

  render() {}

}

Or use ES6's syntax for onDelete() (then it will be bound to the component by itself):

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

这篇关于如何在函数中读取this.props的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！