react.js中的未定义方法

Question

我已经将构造函数中的所有方法绑定到了我的类。 其中之一无法正常工作，控制台记录了未定义的错误。 它是在一个函数中执行的，但我之前曾声明它是此关键字的类。 我无法发现问题。 我正在谈论的是handleRemove方法。

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;

Answer 1

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

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

改成：

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

Answer 2

两件事情：

首先，在您的构造函数中， this绑定而不是ToDoList 。

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

其次， functions是作用域的，因此在.map this不是组件。 您可以使用箭头功能（或使用.bind(this) ）解决此问题：

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