Javascript Reactjs中冒泡的事件

我是React.js的新手，我被困在某个地方已经3天了。我尝试了很多解决方案，但什么都没发生。问题仍然存在

我有一个父组件叫做checkout，它的子组件地址有两个函数在冒泡，分别是

handleSeleteAddress

和

handleelete

，我在父组件中提到了这两个函数

HandleDeleteAddress

工作正常，但当我尝试使用

handleDelete

函数从数组中删除对象时，什么都没有发生，请指导我如何解决此问题

checkout.jsx（父项）：

类签出扩展组件{
状态={
地址:[
{
id:1，
标题：“家”，
描述：“加利福尼亚州维萨利亚市文物路2569号27街，邮编93291”，
主动：对，
},
{
id:2，
标题：“办公室”，
描述：“加利福尼亚州维萨利亚市文物路2569号27街，邮编93291”，
活动：错误，
},
],
};
getIndex=（值、arr、prop）=>{
对于（变量i=0；i{
var getSeletedIndex=this.getIndex（true，this.state.address，“active”）；
const getSelectedObject=[…this.state.address]；
getSelectedObject[getSeletedIndex].active=false；
getSelectedObject[index].active=true；
this.setState（{地址：getSelectedObject}）；
};
handleDelete=（地址ID）=>{
const getSelectedObject=this.state.address.filter(
（e） =>e.id！==addressId
);
this.setState（{地址：getSelectedObject}）；
};
render（）{
返回(
自闭症
)
}
}

AddressSection.jsx（子项）：

{this.props.address.map（（div，index）=>(
this.props.seleteAddress（索引）}
className={this.props.addressClass（索引）}
>

{div.title}

{div.description}

this.showEditRodal（index）}
>
this.props.deleteAddress（div.id）}
>
))}

您应该从AddressSection.jsx（子）传递事件并停止传播：）

---

您应该从AddressSection.jsx（子）传递事件并停止传播：）

---

您是否通过调试确保未调用相应的函数并传递正确的参数？？你能更新完整的地址部分代码吗？当我点击将调用HandleEleteAddress的div时，我已经签入调试。它的接收索引工作正常，但当我点击handleDelete时，bhot函数首先调用handleDelete，然后调用HandleEleteAddress，并且两者都得到参数。为什么要两个不同的句柄点击处理程序？因为我有框，有显示地址，当我在任何框上悬停时，有显示小的删除按钮，所以当我点击框进行选择时，它会正常工作，但当我删除任何框时，出现问题，它会首先冒泡handleDelete调用，然后是HandleDeleteAddress，您是否通过调试确保相应的函数是正确的未调用且正确的参数已通过？？你能更新完整的地址部分代码吗？当我点击将调用HandleEleteAddress的div时，我已经签入调试。它的接收索引工作正常，但当我点击handleDelete时，bhot函数首先调用handleDelete，然后调用HandleEleteAddress，并且两者都得到参数。为什么要两个不同的句柄点击处理程序？因为我有框，有显示地址，当我在任何框上悬停时，有显示小的删除按钮，所以当我点击框进行选择时，它会正常工作，但当我删除任何框时，出现问题，它会首先冒泡handleDelete调用，然后是HandleDeleteAddress

    <div className="addressBoxes">
                {this.props.address.map((div, index) => (
                  <div
                    onClick={() => this.props.seleteAddress(index)}
                    className={this.props.addressClass(index)}
                  >
                    <p>
                      <b>{div.title}</b>
                    </p>
                    <p>{div.description}</p>
                    <div className="edit">
                      <span
                        className="editBtn"
                        onClick={() => this.showEditRodal(index)}
                      >
                        <img src="./assets/images/edit.png" />
                      </span>
                      <span
                        className="deleteBtn"
                        onClick={() => this.props.deleteAddress(div.id)}
                      >
                        <img src="./assets/images/check.gif" />
                      </span>
                    </div>
                  </div>
                ))}
              </div>

 handleDelete = (e, addressId) => {
        e.stopPropagation();
        const getSelectedObject = this.state.address.filter(
         (e) => e.id !== addressId
        );
        this.setState({ address: getSelectedObject });
  };