为什么这个函数需要绑定'this'？

Question

我正在学习 React 教程，我注意到我有一个看起来像这样的函数：

  onDeleteClick = (id, dispatch) => {
    console.log(id);
    // this is a function which is a part of the global state
    dispatch({ type: "DELETE_CONTACT", payload: id });
  };

在我的表格中我有这个：

<i onClick={this.onDeleteClick.bind( this, this.props.id, dispatch)} className="fas fa-times" style={{ cursor: "pointer", float: "right", color: "red" }}></i>

所以，我的问题是为什么我需要将 'this' 绑定到 onDeleteClick，因为我没有在 onDeleteClick 中使用状态或任何其他 class 方法，这些方法需要 'this' .但是，当我删除它时，出现错误 Uncaught TypeError: dispatch is not a function.

我明白为什么 'this.props.id' 和 'dispatch' 需要绑定，但不确定为什么当我从这个 <i> 标签中删除 'this' 时 dispatch 不再是一个函数.

这里是完整的 class:

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Consumer } from "../../context";

class Contact extends Component {
  state = {
    showContactInfo: false,
    num: 1, // this is useless. just for testing things
  };

  // uses arrow function because otherwise we couldn't use 'this'
  onShowClick = (e) => {
    var newNum = this.state.num;
    newNum = newNum + 1;
    this.setState({
      showContactInfo: !this.state.showContactInfo,
      num: newNum,
    });
  };

  onDeleteClick = (id, dispatch) => {
    console.log(id);
    // this is a function which is a part of the global state
    dispatch({ type: "DELETE_CONTACT", payload: id });
  };

  render() {
    //pull boolean out of this.state
    const { showContactInfo } = this.state;
    return (
      <Consumer>
        {(value) => {
          const { dispatch } = value;
          return (
            <div className="card card-body mb-3">
              <h4>
                {this.props.name}
                <i
                  onClick={this.onShowClick}
                  className="fas fa-sort-down"
                  style={{ cursor: "pointer" }}
                ></i>
                <i
                  onClick={this.onDeleteClick.bind(
                    this,
                    this.props.id,
                    dispatch
                  )}
                  className="fas fa-times"
                  style={{ cursor: "pointer", float: "right", color: "red" }}
                ></i>
              </h4>
              {showContactInfo ? (
                <ul className="list-group">
                  <li className="list-group-item">Email: {this.props.email}</li>
                  <li className="list-group-item">Phone: {this.props.phone}</li>
                </ul>
              ) : null}
            </div>
          );
        }}
      </Consumer>
    );
  }
}

Contact.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  phone: PropTypes.string.isRequired,
};

export default Contact;

Answer 1

But, when I remove it, I get the error Uncaught TypeError: dispatch is not a function

删除后将其更改为什么？我猜是这样的：

this.onDeleteClick.bind(this.props.id, dispatch)

如果是，那就是告诉 .bind 您希望 this 等于 this.props.id，并且第 0 个参数 (id) 为 dispatch。第一个参数（调度）不会绑定到任何东西。

如果您愿意，可以将 this 设置为 null 或 undefined:

this.onDeleteClick.bind(null, this.props.id, dispatch)

但这并不能真正给您带来任何好处，如果您曾经修改 onDeleteClick 以使用 this，您可能仍然需要修复绑定。所以你不妨绑定 this 开始。

为什么这个函数需要绑定'this'？

Why does this function need 'this' to be binded to it?

reactjs

react-redux

es6-modules