Javascript React类组件在方法上使用此绑定

对于如下示例类组件：

class Todo extends Component {
  state = {
    list: ["First Todo"],
    text: ""
  };

  handleSubmit(e) {
    e.preventDefault();
    if (this && this.setState) {
      console.log("this present in handleSubmit");
      this.setState(prevState => ({
        list: prevState.list.concat(this.state.text),
        text: ""
      }));
    } else {
      console.log("this not present in handleSubmit");
    }
  }

  handleChange(e) {
    if (this && this.setState) {
      console.log("this present in handleChange");
      this.setState({
        text: e.target.value
      });
    } else {
      console.log("this not present in handleChange");
    }
  }

  removeItem(index) {
    if (!this || !this.setState) {
      console.log("this not present in removeItem");
    }
    console.log("this present in removeItem");
    const list = this.state.list;
    list.splice(index, 1);
    this.setState({ list });
  }

  render() {
    return (
      <div>
        <h1>TODO LIST</h1>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>
          <ol>
            {this.state.list.map((item, index) => {
              return (
                <li key={index}>
                  {item}
                  <button onClick={() => this.removeItem(index)}>Delete</button>
                </li>
              );
            })}
          </ol>
        </form>
      </div>
    );
  }
}

<input value={this.state.text} onChange={e => this.handleChange(e)} />

<form onSubmit={this.handleSubmit}>

而

handleSubmit

作为函数本身传递。如下图所示：

class Todo extends Component {
  state = {
    list: ["First Todo"],
    text: ""
  };

  handleSubmit(e) {
    e.preventDefault();
    if (this && this.setState) {
      console.log("this present in handleSubmit");
      this.setState(prevState => ({
        list: prevState.list.concat(this.state.text),
        text: ""
      }));
    } else {
      console.log("this not present in handleSubmit");
    }
  }

  handleChange(e) {
    if (this && this.setState) {
      console.log("this present in handleChange");
      this.setState({
        text: e.target.value
      });
    } else {
      console.log("this not present in handleChange");
    }
  }

  removeItem(index) {
    if (!this || !this.setState) {
      console.log("this not present in removeItem");
    }
    console.log("this present in removeItem");
    const list = this.state.list;
    list.splice(index, 1);
    this.setState({ list });
  }

  render() {
    return (
      <div>
        <h1>TODO LIST</h1>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>
          <ol>
            {this.state.list.map((item, index) => {
              return (
                <li key={index}>
                  {item}
                  <button onClick={() => this.removeItem(index)}>Delete</button>
                </li>
              );
            })}
          </ol>
        </form>
      </div>
    );
  }
}

<input value={this.state.text} onChange={e => this.handleChange(e)} />

<form onSubmit={this.handleSubmit}>

但是，我真的不知道为什么会这样。因为，在我的理解中，函数如何传递并不重要，即作为函数本身或箭头表示，如上所述

---

箭头函数具有词法

此

。也就是说。因此，当您使用它而不是

类方法时，
此
值将映射到实例。但是当您调用
this.onSubmit
时，这将引用本地范围，而不是实例本身。要解决此问题，请在构造函数中使用
箭头函数
或
绑定
onSubmit
方法

constructor(props){
   super(props)
   this.onSubmit = this.onSubmit.bind(this)
}

箭头函数有词法
这个
。也就是说。因此，当您使用它而不是
类方法时，
此
值将映射到实例。但是当您调用
this.onSubmit
时，这将引用本地范围，而不是实例本身。要解决此问题，请在构造函数中使用
箭头函数
或
绑定
onSubmit
方法

constructor(props){
   super(props)
   this.onSubmit = this.onSubmit.bind(this)
}

在我看来，函数是如何传递的并不重要

所以这里有新的东西要学

传递
onChange={e=>this.handleChange（e）}
与在构造函数中使用
.bind
或传递引用并使用
.bind
相同

在渲染方法中将其作为箭头函数传递时，它将获得组件的
this
，而不是该方法的this

您应该注意到，
onChange={e=>this.handleChange（e）}
不是一个好的实践，因为在每次渲染时，您都将创建一个新函数

在我看来，函数是如何传递的并不重要

所以这里有新的东西要学

传递
onChange={e=>this.handleChange（e）}
与在构造函数中使用
.bind
或传递引用并使用
.bind
相同

在渲染方法中将其作为箭头函数传递时，它将获得组件的
this
，而不是该方法的this

您应该注意到，
onChange={e=>this.handleChange（e）}
不是一个好的实践，因为在每次渲染时，您都将创建一个新函数。
哦，是的。这是有道理的。实际上，我大部分时间都使用
箭头函数
。我总是使用箭头函数，但这绝对不是一条规则。是的，
绑定
可以节省每个实例的内存占用，因此，当我们使用某个组件的大量实例时，可能会出现用例。我仍然对一件事感到困惑。arrow函数使用环绕此区域的命令。所以，在render方法中的arrow函数中，它引用了类的this。但是，当您从该arrow函数调用class方法时，上下文如何设置为该class方法。如果我们用这个就有意义了。handleChange。call（这个，e）。哦，是的。这是有道理的。实际上，我大部分时间都使用
箭头函数
。我总是使用箭头函数，但这绝对不是一条规则。是的，
绑定
可以节省每个实例的内存占用，因此，当我们使用某个组件的大量实例时，可能会出现用例。我仍然对一件事感到困惑。arrow函数使用环绕此区域的命令。所以，在render方法中的arrow函数中，它引用了类的this。但是，当您从该arrow函数调用class方法时，上下文如何设置为该class方法。如果我们使用this.handleChange.call（this，e），这是有意义的。
您应该注意到onChange={e=>this.handleChange（e）}
是的，好的捕获，它只是为了这个示例的目的而创建的。
您应该注意到onChange={e=>this.handleChange（e）}
是的，好的捕获，它仅为本示例的目的而创建。