Как я могу получить значение от ребенка в прародителя? - PullRequest
Новая
       16

Как я могу получить значение от ребенка в прародителя?

0 голосов
/ 25 января 2019

РЕДАКТИРОВАТЬ: Решение найдено. Я забыл иметь опору '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 с помощью задачи и подзадачи. Я сталкиваюсь с проблемой, когда хочу удалить подзадачу, сообщающую, что мой обратный вызов не является функцией. У меня нет проблем при удалении задачи. Я действительно не понимаю мою проблему, это проблема обратного вызова или, может быть, моя структура данных?
П.С .: это мой первый пост, он немного уродливый ..
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>
    );
  }
}


Наконец у меня есть пункт, который отображает мои данные 

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


Я ожидаю удаления правильной задачи или подзадачи при нажатии на элемент.

1 Ответ

0 голосов
/ 25 января 2019

Этот код смущает меня: 

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 не нужен, он не имеет никакой дополнительной логики.

...