Javascript react.js中未定义的方法

我已经将构造函数中的所有方法绑定到我的类。 其中一个工作不正常，控制台记录未定义的错误。它是在一个函数中执行的，但我之前声明它是一个类的this关键字。我看不出这个问题。我说的方法就是把手移动

import React, { Component } from 'react';


class ToDoList extends Component {
  constructor(props) {
    super(props);
    this.state = {list: [], items: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(ToDoList);
  }

  handleChange(event) {
    this.setState({items: event.target.value})
    console.log(event.target.value);
  }

  handleSubmit(event) {
    this.setState({ list: [...this.state.list, this.state.items]})
    event.preventDefault();
  }

  handleRemove(event) {
    const filteredArray = this.state.list.filter(item => item !== event.target.value)
    this.setState({list: filteredArray});
  }



  render() {
    return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input onClick={this.handleSubmit}type="submit" value="Submit" />
      </form>
      <ul>
        {this.state.list.map(function(i, index){
          return(
            <li key={index}>{i}<button onClick={this.handleRemove}>X</button></li>
          )
        })}
      </ul>
      <p>Remaining: {this.state.list.length}</p>
      </div>
    );
  }
}

export default ToDoList;

---

您将方法绑定到类，而不是实例-该类没有名为handleRemove的静态方法，即使它有-您也无法在静态方法中访问它；因此，这将不起作用：

this.handleRemove = this.handleRemove.bind(ToDoList);

改为：

this.handleRemove = this.handleRemove.bind(this);

两件事：

首先，在构造函数中，绑定这个而不是ToDoList

其次，函数的作用域是有限的，因此在.map中，这不是组件。您可以通过使用箭头函数或使用.bindthis来修复此问题：

---

this.handleRemove=this.handleRemove.bindToDoList；应该是this.handleRemove=this.handleRemove.bindthis；可能是Thx Fabian的副本，我只是在构造函数中尝试了这个，意外地将类作为this关键字保留，但现在，它工作了，我不知道arrow函数将不会创建自己的执行上下文。是的，它最初应该使用类名工作，但您将无法删除任务。如果我的答案解决了您的问题，请单击大复选框接受它作为答案。

this.handleRemove = this.handleRemove.bind(this);

{this.state.list.map((i, index) => (
  <li key={index}>{i}<button onClick={this.handleRemove}>X</button></li>
))}