Question

编辑：找到解决方案。创建子列表时我忘记了一个道具'handleCallback'

 renderSubList() {
        let subList = this.props.item.subList
        if (subList === undefined)
            return
        subList = subList.map(
            item =>
            <Item key={item.id} item={item} handleCallback={...} /> <== HERE
            )
          return subList

    }

我对Reactjs有点陌生，所以我试图用任务和子任务创建一个自定义的TODO列表。我想删除一个子任务告诉我回调不是函数时遇到问题。删除任务时没有问题。我不是很了解我的问题，这是回调问题还是我的数据结构？
P.S：这是我的第一篇文章，有点丑陋。
github代码仓库：https://github.com/JohnPAfr/todolist

所以我的数据如下：

todoList:[
        {id:0, task:'tâche #1', subList: [
            {id:0, parent:0, task:'sous-tâche #1'},
            {id:1, parent:0, task:'sous-tâche #2'},
            {id:2, parent:0, task:'sous-tâche #3'},
        ]},
        {id:1, task:'tâche #2'},
        {id:2, task:'tâche #3'},
        {id:3, task:'tâche #4'},
]

我想从子列表中删除项目时遇到问题。

我从状态映射“ todoList”，并为列表中的每个对象创建一个TodoItem。

class TodoBis extends Component {
  constructor(props){
    super(props)
    this.state = {
      todoList: ... (see above)
    }

    this.renderTodoItems = this.renderTodoItems.bind(this)
    this.handleAdding = this.handleAdding.bind(this)
    this.handleDelete = this.handleDelete.bind(this)

  }

  renderTodoItems() {
    let list = this.state.todoList
    list = list.map(
      item =>
      <TodoItem key={item.id} item={item} handleDelete={this.handleDelete}/>
      )
    return list
  }

  handleAdding(input) {...}

  handleDelete(item) {...}

  render() {
    return (
      <div>
        <AddBar handleAdding={this.handleAdding} />
        {this.renderTodoItems()}
      </div>
    );
  }
}

TodoItem创建带有子项的项

class TodoItem extends Component {
    constructor(props) {
        super(props)

        this.renderSubList = this.renderSubList.bind(this)
        this.handleCallback = this.handleCallback.bind(this)

    }

    renderSubList() {
        let subList = this.props.item.subList
        if (subList === undefined)
            return
        subList = subList.map(
            item =>
            <Item key={item.id} item={item} />
            )
          return subList

    }

    handleCallback(item) {
        this.props.handleDelete(item)
    }

  render() {
      const {item} = this.props
    return (
      <div>
          <Item key={item.id} item={item} handleCallback={() => this.props.handleDelete(item)} />
          <div className={(item.subList === undefined) ? '' : 'subList'}>
            {this.renderSubList()}
          </div>
      </div>
    );
  }
}

最后，我让Item显示我的数据

class Item extends Component {

    render() {
        const {item} = this.props
        const task = item.task
        return (
            <div onClick={() => this.props.handleCallback(this.props.item)} className='item-container'>
                <span>{task}</span>
            </div>
        )
    }
}

我希望在单击“项目”时删除正确的任务或子任务。

Answer 1

此代码使我感到困惑：

handleCallback() {
        const handleCallback = this.props.handleCallback
        const item = this.props.item
        console.log(item)
        handleCallback(item)
    }

<div onClick={() => this.handleCallback(item)} className='item-container'>
                <span>{task}</span>
            </div>

为什么不将其更改为此：

<div onClick={() => this.props.handleCallback(this.props.item)} className='item-container'>
                <span>{task}</span>
            </div>

不需要第二个handleCallback，它没有其他逻辑。

我如何从祖父母的孩子那里获得价值？

1 个答案: