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

多亏了我的朋友，我发现了我的错误。

也许犯这种明显的错误太愚蠢了，所以我可以在网站上找到答案。

希望它能帮助初学者并且在解决此类问题时需要一些信息。

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

Answer 2

假设您将子组件保存在列表中。您可以在州内拥有它。

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

这里发生的是，当我在道具上创建每个子组件时，我会将其发送给每个子组件。单击子组件的删除按钮后，它将通过父组件提供的回调方法将其ID发送给父组件。

用按钮反应删除组件列表

2 个答案: