反应.js:将回调传递给子组件并删除组件

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

本文关键字：组件 删除 js 回调 反应      更新时间：2023-09-26

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

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

假设你想生成一个待办事项列表，但向每个待办事项传递一个回调，这样如果点击该待办事项上的delete按钮，它将调用其父级（TodoList）中的函数removeTodo，将其从DOM中删除。

所以我遇到的问题是，在下面的例子中，由于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>
    )
  }
});

查看您的代码，由于您遵循的是 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;
    });
  },
相关文章：