如何解决Reactjs中的事件冒泡
我是React.js的新手,从3天起我就被困在某个地方,尝试了许多解决方案,但问题仍然没有解决。
我有一个称为checkout的父组件,它的子组件地址有两个冒泡的函数,它们是handleSeleteAddress
和handleDelete
,我在父组件中提到过。 handleSeleteAddress
正常工作,但是当我尝试使用handleDelete
函数从数组中删除对象时,没有任何事情发生,请指导我如何解决此问题
checkout.jsx(父级):
class Checkout extends Component {
state = {
address: [
{
id: 1,title: "Home",description: "27 Street,2569 Heritage Road Visalia,CA 93291",active: true,},{
id: 2,title: "Office",active: false,],};
getIndex = (value,arr,prop) => {
for (var i = 0; i < arr.length; i++) {
if (arr[i][prop] === value) {
return i;
}
}
return -1;
};
handleSeleteAddress = (index) => {
var getSeletedIndex = this.getIndex(true,this.state.address,"active");
const getSelectedObject = [...this.state.address];
getSelectedObject[getSeletedIndex].active = false;
getSelectedObject[index].active = true;
this.setState({ address: getSelectedObject });
};
handleDelete = (addressId) => {
const getSelectedObject = this.state.address.filter(
(e) => e.id !== addressId
);
this.setState({ address: getSelectedObject });
};
render() {
return (
<React.Fragment>
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<AddressSection
address={this.state.address}
addressClass={this.handleAddressClass}
seleteAddress={this.handleSeleteAddress}
deleteAddress={this.handleDelete}
/>
</div>
<div class="col-sm-6 text-center">asd</div>
</div>
</div>
</React.Fragment>
)
}
}
AddressSection.jsx(Child):
<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>
解决方法
您应该通过AddressSection.jsx(Child)传递事件并停止传播:)
handleDelete = (e,addressId) => {
e.stopPropagation();
const getSelectedObject = this.state.address.filter(
(e) => e.id !== addressId
);
this.setState({ address: getSelectedObject });
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。