在子组件中反应调用父组件方法，这在父方法中是未定义的（typescript）

Question

我有两个组成部分。

我在我的父组件中发送showModal Delete方法作为我的子元素的prop。

import * as React from 'react';
import Table from './../components/Table';
import Delete from './../components/Delete';

class User extends React.Component<any, any> {
  static urlUsers : string = 'http://localhost:52968/employee/api/index';
  static urlDelete : string = 'http://localhost:52968/employee/api/delete/';
  static tableHeader = ['Id','First name', 'Surname','Email','Phone number',''];
  static columns = ['id','firstName', 'lastName','email','phoneNumber'];
  private delete: any;

    constructor( props: any) {
      super(props); 
      this.state = { users: []};
      console.log(this);
      this.showModalDelete.bind(this);
    }

    componentWillMount() {

    }

    showModalDelete() {
      console.log(this);
      this.delete.handleShow();
    }

    render() {   
      console.log(this);
      return (
        <div>
          <Table 
            show={this.showModalDelete} 
            url={User.urlUsers} 
            header={User.tableHeader}
            columns={User.columns}
          />
          <Delete ref={(del) => { this.delete = del; }} />
        </div>

      );
    }
  }
export default User;

然后在我的子组件中定义一个onClick方法来调用父方法。 （this.props.show）

import * as React from 'react';
import * as $ from 'jquery';

class Table extends React.Component<any,any> {

  constructor(props: any) {
      super(props);
      this.state = { items: []};
  }

  componentWillMount() {
      this.loadItems();
  }

  loadItems() {
    var self: Table;
    self = this;
    $.ajax (
      {
        url: self.props.url,
        dataType: 'json',
        cache:false,
        success:
         function(items: any) {
          self.setState({items:items});
        },
        error: function(xhr: any, status: any, err: any) {
            console.log(xhr);
        }
      });
    }    

  render() {
    return (
    <table className="table row-border stripe no-footer">
        <thead>
          <tr>
              {
                this.props.header.map((item:string,index: number) =>
                <th key={index}>{item}</th>
                )
              }
          </tr>
        </thead>

        <tbody>
        {
            this.state.items.map((item:any) =>
                <tr key={item.id}>
                    {
                        this.props.columns.map((column:string,index: number) => 
                            <td key={index}>{item[column]}</td>
                        )                   
                    }   
                    <td>
                        <a 
                            onClick={this.props.show} 
                            className="glyphicon glyphicon-trash table-buttons table-buttons-delete" 
                        />
                    </td>             
                </tr>
            )
        }
        </tbody>       
      </table>
    );
  }
}

export default Table;

当调用show modal delete时，这是未定义的。我究竟做错了什么？我很困惑如何在打字稿中使用它。谢谢你的帮助。

Answer 1

.bind方法将返回一个具有绑定this的新函数。它不会改变你调用它的函数。因此，构造函数绑定不会重新分配方法，因此就好像您根本没有调用bind一样。

要解决这个问题，您需要做的就是在调用bind时重新分配方法：

this.showModalDelete = this.showModalDelete.bind(this);