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 - 该类没有名为static的{{1}}方法，即使它确实存在 - 您无法在静态方法中访问handleRemove;因此这不起作用：

this

更改为：

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

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

react.js中的未定义方法

2 个答案: