React.js：將回調傳遞給子組件並刪除組件

Question

這是到源的鏈接https://github.com/bengrunfeld/gae-react-flux-todos/tree/master/src/js

在React教程中，它展示了如何將回調傳遞給子組件，然后該子組件可以繼續使用它。

假設您要生成一個待辦事項列表，但向每個待辦事項傳遞一個回調，以便在該待辦事項上單擊delete按鈕，它將在其父項（ TodoList ）中調用函數removeTodo ，將其從DOM中刪除。

所以我this.props.data.map的問題是在以下示例中，由於this.props.data.map的范圍，我無法將this.removeTodo傳遞給<Todo> 。 如果嘗試，它會錯誤地顯示為undefined 。

其次，即使可以，我也不確定如何從DOM中刪除Todo，因為我無法訪問TodoList可變state -它僅作為不可變的this.props 。 如果可以更改state ，則可以調用setState ，它將觸發一個渲染器，該渲染器將從列表中刪除項目。

那么您將如何解決呢？

var TodoList = React.createClass({
  removeTodo: function(todo) {
    // Remove Todo
    // Change the state
    // Re-render with setState();
  },
  render:function(){
    var todoNodes = this.props.data.map(function(todo) {
      return (
        <Todo key={todo.id} id={todo.id} onRemoveTodo={this.removeTodo}>
          {todo.title}
        </Todo>
      );
    });
    return (
      <div className="todoList">
        {todoNodes}
      </div>
    )
  }
var Todo = React.createClass({
  onDeleteClick: function(todo){
    AppActions.deleteTodo({id: todo.target.className});

    // Call the `removeTodo` function in `TodoList` (parent) here!
    // this.props.onRemoveTodo
  },
  render:function(){
    return (
      <div><p>{this.props.children} - <a className={this.props.id} onClick={this.onDeleteClick}>delete</a></p></div>
    )
  }
});

Answer 1

查看您的代碼，因為您遵循的是Flux體系結構， CHANGE_EVENT在刪除商店中存在的deleteTodo的待辦事項后，需要發出CHANGE_EVENT 。

  deleteTodo: function(todo) {
    this.deleteTodoOnServer(todo).done(function(result){

      //DELETE your the TodoItem here

      AppStore.emitChange(AppConstants.CHANGE_EVENT);
      return;
    }).fail(function(result){
      console.log('fail');
      // return 'error in deleteTodoOnServer Ajax call: ' + result;
    });
  },