Reactjs 无法删除react中的列表项。错误显示：未捕获类型错误：无法读取属性'；拆下'；未定义的

我正在尝试制作一个简单的todo应用程序。在这个应用程序中，我希望通过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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
这个州={
待办事项：[]
};
};
entertodo（按键）{
var todo=this.refs.newtodo.value；
if（keypress.charCode==13）
{
这是我的国家({
todo:this.state.todo.concat（todo）
});
this.refs.newtodo.value=null；
};
};
todo（数据，i）{
返回(

{data}

);
};
删除（i）{
var todo=this.refs.newtodo.value；
var deletetodo=this.state.todo.concat（todo）
删除TODO.拼接（i，1）；
this.setState（{todo:deletetodo}）
};
render（）{
返回(

{this.state.todo.map（this.todo.bind（this））}

);
}
}
导出默认应用程序；

---

如果我尝试调用一个函数，在单击复选框时删除列表项，也会出现同样的问题。需要帮助。

您需要绑定

todo

和

删除

功能，还需要

正确拼接todo

数组。由于

ref new

未定义且唯一，因此无法访问该值，因此只需按索引拼接数组即可

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
这个州={
待办事项：[]
};
};
entertodo（按键）{
var todo=this.refs.newtodo.value；
if（keypress.charCode==13）
{
这是我的国家({
todo:this.state.todo.concat（todo）
});
this.refs.newtodo.value=null；
};
};
todo=（数据，i）=>{
返回(

{data}
删除

);
};
删除=（i）=>{
var deletetodo={…this.state.todo}；
这个.state.todo.splice（i，1）；
this.setState（{todo:this.state.todo}）
}; 
render（）{
返回(

{this.state.todo.map（this.todo）}

);
}
}
ReactDOM.render（，document.getElementById（'app'））

您能建议如何删除复选框上的文本吗更改复选框只需添加一个样式文本装饰：线条通过；在检查复选框是否被选中后，我遇到了同样的问题，错误为textEditionUndefined。我使用了bind，但仍然无法调试。你可以问另一个问题吗？可以给我发送我将处理iti的链接吗？我发布了一个新问题