javascript - React.js 中未定义的方法

Question

我已将构造函数中的所有方法绑定(bind)到我的类。其中之一无法正常工作，控制台会记录未定义的错误。它在函数中执行，但我之前将 this 关键字声明为类。我看不出问题所在。 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

您将该方法绑定(bind)到类，而不是实例 - 该类没有名为handleRemove的静态方法，即使确实如此 - 您也无法在静态方法中访问 this；因此这行不通:

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

更改为:

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