React.js: 将回调传递给子组件并移除组件

Question

这里是link来源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 中删除待办事项，因为我无法访问 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;
    });
  },

React.js: 将回调传递给子组件并移除组件

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

javascript

reactjs