无法删除反应中的列表项。错误显示：未捕获的TypeError：无法读取未定义的属性“remove”

Question

我正在尝试制作简单的待办事项应用程序。在此我想通过onClick函数从列表中删除项目。按钮onClick返回名为remove（i）的函数，该函数删除列表中的项目。但我上面提到的错误。 代码如下：

   import React, { Component } from 'react';
import ReactDom from 'react-dom';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat(todo)
      });
      this.refs.newtodo.value=null;
    };
  };
  todo(data,i){
    return (
      <li key={data.id} index={i}>
      <input type="checkbox"className="option-input checkbox"/>
      <div  className="item">
      {data}
      <button onClick={this.remove.bind(this)}className="destroy"></button>
      </div>

      </li>
    );
  };
  remove(i){
    var todo=this.refs.newtodo.value;
    var deletetodo=this.state.todo.concat(todo)
    deletetodo.splice(i,1);
    this.setState({todo:deletetodo})
  };

  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo.bind(this))}

      </ul>
      </div>
      </div>
    );
  }
}

export default App;

如果我尝试在单击复选框时调用函数以取消列表项，则会出现同样的问题。需要帮助。

Answer 1

您需要绑定todo和remove函数，并且还需要splice your todo数组。由于您的ref new未定义且唯一，因此您无法访问该值，因此只需按索引拼接数组即可

＆＃13;

＆＃13;

class App extends React.Component {

  constructor(){
    super();
    this.state={
      todo:[]
    };
  };

  entertodo(keypress){
    var todo=this.refs.newtodo.value;
    if( keypress.charCode == 13 )
    {
      this.setState({
        todo: this.state.todo.concat(todo)
      });
      this.refs.newtodo.value=null;
    };
  };
  todo = (data,i) => {
    return (
      <li>
      <input type="checkbox"className="option-input checkbox"/>
      <div key={data.id} className="item">
      {data}
      <button onClick={this.remove.bind(this, i)}className="destroy">Delete</button>
      </div>

      </li>
    );
  };
  remove = (i) =>{
    var deletetodo = {...this.state.todo};
    this.state.todo.splice(i,1);
    this.setState({todo:this.state.todo})
  }; 


  render() {

    return (
      <div>
      <div className="lines"></div>
      <div>
      <input type="text" ref= "newtodo" onKeyPress={this.entertodo.bind(this)}className="inputext"placeholder='todos'/>
      </div>
      <div className="app">

      <ul>
      {this.state.todo.map(this.todo)}

      </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;