javascript - React 类组件异常 this 对方法的绑定

问题描述

对于如下示例类组件：

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

绑定到类方法的行为this并不一致。

玩弄这个组件，我们会发现，handleChange并且removeItem有正确的this上下文，而上下文handleSubmit为.thisundefined

两个具有正确this上下文的函数在 jsx 中都表示为箭头函数。如下所示：

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

虽然handleSubmit作为函数本身传递。如下所示：

<form onSubmit={this.handleSubmit}>

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

标签： javascriptreactjsthises6-class

箭头函数有词法this。这意味着它的值是由周围的范围决定的。因此，当您使用它而不是class methods将this值映射到实例时。但是当您调用时this.onSubmit this将引用本地范围而不是实例本身。要解决它，请使用构造函数中的方法arrow functions或方法。bindonSubmit

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

javascript - React 类组件异常 this 对方法的绑定

问题描述

解决方案

推荐阅读