javascript - React.js : Passing a callback to a child component and removing a component

Question

这里是来源链接https://github.com/bengrunfeld/gae-react-flux-todos/tree/master/src/js

在 React 教程中，它展示了如何将回调传递给子组件，然后子组件可以继续使用它。

假设您想要生成一个待办事项列表，但向每个待办事项传递一个回调，以便如果delete在该待办事项上点击按钮，它将调用函数 removeTodo在其父级 ( TodoList ) 中，这会将其从 DOM 中删除。

所以我遇到的问题是在下面的示例中，由于 this.props.data.map 的范围，我无法通过this.removeTodo至<Todo> 。它错误为 undefined如果你尝试一下。

其次，即使可以，我也不知道如何从 DOM 中删除 Todo，因为我无权访问 state 的可变版本。里面TodoList - 它仅作为不可变的 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 架构，因此在删除商店中存在的 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;
    });
  },