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

Question

Я вставляю все различные компоненты в массив, чтобы последний выбранный компонент отображался вверху,

но я не знаю, как удалить элемент нажатием кнопки внутри компонента

Кажется, я не могу передать функцию с индексом ключа внутри компонента ...

Так что я не знаю, на какой компонент я нажал ...

Пожалуйста, помогите мне разобраться.

ComponentA.js
....
render(){
   return <button onClick{this.props.Delete}>Delete</button>
}

---

Parent.js
const List =({ComponentsList}) =>(
<div> 
ComponentsList.map((item,i) => <div key={i}>{item}</div>)} 
</div>)

---

Кроме того, Я также считаю, что люди не используют этот способ для перечисления элементов,

что если все эти компоненты разные?

Что люди обычно будут иметь с этим дело?

Спасибо!

.

.

.

Отредактировано:

---

Выясните один вопрос о том, как удалить компонент

см. Ответ ниже

Но я считаю, что Государство все еще существует !!!

Кто-нибудь может мне помочь?

---

Answer 1

Допустим, вы держите дочерние компоненты в списке. Вы можете получить его в государстве.

inputList: []

Допустим, на родительском компоненте есть кнопка для добавления дочерних компонентов. Его код будет выглядеть примерно так.

<div>
    <Button variant= "light" className="button" onClick={this.onAddAnotherBtnClick}> 
        Add Another
    </Button>
 {this.state.inputList.map(function(input, index) {
  return input;  
 })}
 </div>

(Возможно, вам придется привязать onAddAnotherBtnClick следующим образом). В состоянии

this.onAddAnotherBtnClick = this.onAddAnotherBtnClick.bind(this);

onAddAnotherBtnClick выглядит следующим образом.

onAddAnotherBtnClick = (event) =>{
    const inputList = this.state.inputList;
    this.setState({
    inputList: inputList.concat(<ChildComponent Id={inputList.length} 
        callbackDeleteButton={this.delete}/>)
  });
}

Это метод удаления.

delete = (Id) => {
  delete this.state.inputList[Id];  
  this.setState({ inputList : this.state.inputList });
}

Это кнопка Удалить на дочернем компоненте.

<Button variant= "light" className="button" onClick={this.onDeleteButtonClick}>
    Delete
</Button>

Вот метод onDeleteButtonClick.

onDeleteButtonClick = () => {
    this.props.callbackDeleteButton(this.state.Id);
}

(Вы должны будете связать метод в State следующим образом).

this.onDeleteButtonClick = this.onDeleteButtonClick.bind(this);

Здесь происходит то, что я отправляю идентификатор каждому дочернему компоненту, когда он создается на подпорках. При нажатии кнопки удаления дочернего компонента он отправляет свой идентификатор родителю с помощью метода обратного вызова, предоставленного родителем.

Answer 2

Благодаря моему другу я нахожу свою ошибку.

Может быть, слишком глупо совершать такую ​​очевидную ошибку, чтобы я мог найти ответ на сайте.

Надеюсь, что это будет надеяться на того, кто новичок и нуждается в некоторой информации, когда решит проблему такого рода.

---

Parent.js

constructor(props) {
  super(props)
  this.state = {
      listState:[<ComponentB type="AAAA" delete={this.RemoveItem} />, ...]
  }
}

RemoveItem(dom) {
dom.currentTarget.parentNode.remove()
console.log("detect delete")
}


render() {
    const mapToComponent = data => {
      return data.map((contact, i) => {
        return <div>{contact}</div>
      })
    }

    return (
      <div className="Graph-Panels">
        {mapToComponent(this.state.PanelState)}
      </div>
    )
  }
}

---