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;
    });
  },