反應調用子組件中的父組件方法，這在父方法中是未定義的（typescript）

Question

我有兩個組成部分。

我在父組件中發送showModalDelete方法作為對子元素的提示。

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方法來調用parrent方法。 （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一樣。

要解決此問題，您需要做的就是在調用bind時重新分配該方法：

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