從列表中刪除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

回答

相關問題