Реагировать на проблему с дочерним компонентом соединения - PullRequest
Новая
       29

Реагировать на проблему с дочерним компонентом соединения

0 голосов
/ 08 марта 2020

У меня есть (например) 2 компонента. Конечно, один из них - Родитель, а другой - Дитя Родителя. Моя цель - удалить компонент кнопкой, но когда я нажимаю кнопку удаления внутри дочернего компонента, функция удаления следующего компонента. Может быть, я забыл что-то?

Пример: [[1], [2], [3]] - это вложенный массив с другими массивами. Я хочу удалить [2] (parentArray [1]). Но удалите функцию удаления [3] (parentArray [2]), и у меня есть [[1], [2]]. Это моя проблема.

Родительский компонент: 

import React from 'react'
import classes from './Kanban.module.scss'
import Card from './Card/Card.js'

export default class Kanban extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      cards: [
      ]
    }

    this.createCardHandler = this.createCardHandler.bind(this);
    this.deleteCardHandler = this.deleteCardHandler.bind(this);
  }

  createCardHandler() {

    this.setState({
      cards: this.state.cards.concat({ id: this.state.cards.length })
    })

  }

  deleteCardHandler(index) {

    this.setState(prevState => {

      let cards = [...prevState.cards]

      cards.splice(index, 1)

      return {
        cards: cards
      }

    })

  }

  render() {
    let cards = null;

    cards = this.state.cards.map((cards, id) => {


      return (
        <Card
          index={cards.id}
          id={cards.id}
          onDelete={this.deleteCardHandler.bind(this, id)}
        />
      )
    })

    return (
      <>
        <div>
          <button className={classes.CreateCardButton} onClick={this.createCardHandler}>+</button>
          {cards}

        </div>
      </>
    )
  }
}

Дочерний компонент: 

import React from 'react'
import classes from './Card.module.scss'
import List from './List/List.js'

export default class Card extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      lists: []
    }

    this.CreateListButton = this.CreateListButton.bind(this);
  }

  CreateListButton() {

    this.setState({
      lists: this.state.lists.concat('List')
    })

  }

  deleteListHandler(index) {
    let lists = [...this.state.lists]

    lists.splice(index, 1)

    this.setState({
      lists
    })
  }

  render() {
    let lists = null

    lists = this.state.lists.map((lists, index) => {
      return (
        <List
          index={this.state.lists.length - 1}
          onDelete={this.deleteListHandler.bind(this, index)}
        />
      )
    })
    return (

      <div className={classes.Card}>

        <button className={classes.DeleteCardButton} onClick={this.props.onDelete}>✖</button>

        <input maxLength='18' autoFocus className={classes.InputTitleInCard}></input>

        {lists}

        <button className={classes.CreateNewListButton} onClick={this.CreateListButton}>CREATE NEW LIST</button>

      </div>

    )
  }


}

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

Проблема в том, что вы удалили обработчик. Первоначально состояние вашего Kanban класса - []. Затем, скажем, вы добавляете 4 карты, тогда это станет [{id: 0}, {id: 1}, {id: 2}, {id: 3}] Итак, если вы удалите, скажем, 2-ю карту, ваше новое состояние станет 

[{id: 0}, {id: 2}, {id: 3}]

Теперь, если вы попытаетесь удалить 3-ю карту то есть id = 2, ваш обработчик удаляет элемент index 2 из состояния, то есть элемент с идентификатором 3. Таким образом, при нажатии элемента следующий элемент будет удален. Не полагайтесь на индекс массива (это сопоставление не будет работать после удаления карты), полагайтесь на идентификаторы, которые вы создали для карт. То, как вы написали обработчик удаления, неверно. Вот решение, это должно решить проблему. 

deleteCardHandler(index) {
    this.setState(previousState => previousState.filter(card => card.id !== index))
}

Это в основном возвращает массив со всеми элементами, кроме того, на котором вы нажали delete. Надеюсь, это поможет !!!

0 голосов
/ 08 марта 2020

Пожалуйста, добавьте индексную опору вашему дочернему компоненту 

cards = this.state.cards.map((card, index) => {
  return (
    <Card
      index={card.id}
      id={card.id}
      //Here i giving child component function from parent component
      onDelete={this.deleteCardHandler.bind(this, index)}
    />
  )
})
...