javascript - React拼接子组件麻烦

Question

我有（例如）2 个组件。当然，其中 1 个是 Parent，另一个是 Parent 的 Child。我的目标是按按钮删除组件，但是当我按下子组件内的删除按钮时，删除下一​​个组件的功能。也许我忘记了什么？

示例： [[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}>✖&lt;/button>

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

        {lists}

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

      </div>

    )
  }


}

标签： javascriptreactjscomponentsstatesplice

Answer 1

当您设置状态时，使用 Spread Operator 它对我有用。

this.setState({
    lists
})

变成了这样

this.setState({
    [...lists]
})