リストからtodoItemを削除する

Question

これは以前に尋ねられたと思うので、これを尋ねるのは申し訳ありません。しかし、私は十分に反応すること、あるいは人々が他の質問に与えた答えを理解することは全く理解していません。私が持っているコードにそれらを実装することもできません。

これはメインのコードです：

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; 

は、まず私は、メインのコード内の削除機能を持っていたが、私はよりキャッチされないタイプのエラーを得ましたそれはバインドを見つけることができなかったので??

私はコードの2番目の部分に配置すると、私はプロパティを読み取ることができません "未定義のエラー"を削除します。

何か助けが素晴らしいだろう！ Thxを先行

Answer 1

TodoItemコンポーネントからremoveTodo機能を削除し、のAppコンポーネントにそれを置きます。この関数をTodoItemコンポーネントへの小道具として渡し、十字ボタンクリックでこの関数を呼び出します。覚えておいて、移動後にremoveTodoの機能をAppコンポーネントにバインドすることを忘れないでください。