从列表中删除todoItem

我很抱歉问这个问题，因为我认为这已经被问过。然而，我不明白的反应，或根本不了解人们在其他问题上给出的答案。无论是将它们实施到我拥有的代码中。从列表中删除todoItem

这是主要的代码：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import TodoItem from './components/TodoItem'; 

class App extends React.Component { 

componentWillMount() { 
    this.setState({todoList: [], inputField: ''}); 
} 

handleInput(event) { 
    this.setState({inputField: event.target.value}); 
} 

addTodo(event) { 

    if(this.state.inputField.length === 0 || event.keyCode && event.keyCode !== 13) return; 

    event.preventDefault(); 
    var newTodo = { 
     text: this.state.inputField, 
     created_at: new Date(), 
     done: false 
    }; 
    var todos = this.state.todoList; 
    todos.push(newTodo); 
    this.setState({todoList: todos, inputField: ''}); 
} 

render() { 
    return (
     <div> 
      <ul> 
       { 
        this.state.todoList.map(function(todo, index){ 
         return (
          <TodoItem todo={todo} key={index} /> 
         ); 
        }) 
       } 
      </ul> 
      <div> 
       <label htmlFor="newTodo">Add Todo item</label> 
       <input name="newTodo" value={this.state.inputField} type="text" onKeyUp={this.addTodo.bind(this)} onChange={this.handleInput.bind(this)} /> 
       <button type="button" onClick={this.addTodo.bind(this)} >Add</button> 
      </div> 
     </div> 
    ); 
} 
} 

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

，这是另一部分：

import React from 'react'; 

class TodoItem extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {todo: props.todo}; 
} 
toggleDone(event) { 
    var currentTodo = this.state.todo; 
    if (currentTodo.done) { 
     currentTodo.done = false; 
    } else { 
     currentTodo.done = true; 
    } 
    this.setState({todo: currentTodo}); 
} 

removeTodo(event) { 

    event.preventDefault(); 
    var todos = this.state.todoList; 
    todos.remove(this); 
} 

render() { 
    return (
     <li> 
      <input type="checkbox" onChange={this.toggleDone.bind(this)} /> 
      <span className={this.state.todo.done ? 'done' : ''} > 
      {this.state.todo.text}</span> 
      <button type="button" onClick={this.removeTodo.bind(this)} 
      >X</button> 
     </li> 
    ); 
    } 
} 

export default TodoItem;

首先，我曾在主代码删除功能，但我得到了一个未捕获的类型错误比因为它找不到绑定？

而当我把它放在代码的第二部分，我得到一个无法读取属性“删除”未定义的错误。

任何帮助将会很棒！ THX前期

来源

2017-04-15 MAXaddictable

*“我得到一个无法读取的属性”删除“未定义的错误。”* TodoItem的状态没有一个条目“todoList”。它只有'todo'。 'todoList'是'App'状态的一部分。我建议通过React教程来学习基础知识：https：//facebook.github.io/react/tutorial/tutorial.html。 –

是的，我看了教程，它为这个井字游戏写的代码根本不帮我。我试着改变我的代码，但我现在得到错误，说some.remove不是一个函数。 – MAXaddictable

我现在得到了道具和班级的想法，并且在反应中表态。但我不认为我需要这些对象的值，但是整个对象将被删除，而我在教程中没有学到这些。他们使用了.slice，但我在尝试.remove之前尝试过，并且需要数组的索引才能工作。我不知道如何得到，所以我仍然没有得到它。 – MAXaddictable

从的TodoItem组件删除removeTodo功能，并把它放在应用组件。通过此功能作为道具到TodoItem组件并调用该功能十字按钮点击。请记住，在移动App后，将removeTodo函数绑定到App组件。

来源

2017-04-18 10:49:59

谢谢！你是我的英雄，如果我可以，我会任命你为总统，因为你是个人的伟大！ – MAXaddictable

@MAXaddictable LOL。很高兴它对你有效。 –

从列表中删除todoItem

回答

相关问题