希望避免在单击标题时执行多个操作

Question

>我有一个页面，其中有多个可折叠和可扩展的项目。每个项目都有一个标题和一组项目。我在标题中添加了+图标，这导致展开并显示其下的项目。点击 - 它折叠。这个标头的末尾有一个开关，它有点像拨动开关。所以每当我点击这个 切换 ，它也在扩展和折叠。我想避免这种行为。此切换作为单独的组件提取，但我想避免在切换时展开/折叠。

有人可以在这里帮忙吗：

我已经添加了与之关联的文件。

我还添加了沙盒链接

沙盒：https://codesandbox.io/s/final-parent-child-oh06i

import React, { Component } from "react";
import isEqual from "lodash.isequal";
import ChildSwitch from "./ChildSwitch";
import ParentSwitch from "./ParentSwitch";
import { PARTIAL } from "./constant";
export default class Setting extends Component {
state = {
parent: {
value:
this.props.children.length > 1
? PARTIAL
: this.props.children[0].isEnabled
},
children: this.props.children,
navBarStatus: false
};
componentDidMount() {
this.setParentSwitchValue();
}
changeNavBar = status => {
this.setState({ navBarStatus: !status });
};
shouldComponentUpdate(nextProps, nextState) {
return !isEqual(this.state, nextState);
}
setChildSwitchValue = (id, isEnabled) => {
let clickedChild;
this.setState(
prevState => ({
...prevState,
children: prevState.children.map(child => {
if (child.id === id) {
clickedChild = { ...child, isEnabled: isEnabled };
return clickedChild;
} else {
return child;
}
})
}),
() => this.setParentSwitchValue(clickedChild)
);
};
setParentSwitchValue = clickedChild => {
const { children } = this.state;
let parentVal = PARTIAL;
if (children.every(({ isEnabled }) => isEnabled === true)) {
parentVal = true;
}
if (children.every(({ isEnabled }) => isEnabled === false)) {
parentVal = false;
}
this.setState(
prevState => ({
...prevState,
parent: {
value: parentVal
}
}),
() => {
this.handleChange();
if (clickedChild) {
const changed = {
parent: {
name: this.props.name,
value: parentVal
},
child: clickedChild
};
console.log("This is the changed child", changed);
}
}
);
};
setChildrenValue = value => {
this.setState(
prevState => ({
...prevState,
parent: {
value
},
children: prevState.children.map(child => ({
...child,
isEnabled: value
}))
}),
() => {
this.handleChange();
console.log("Parent Changed", this.state);
}
);
};
handleChange = () => {
const { id, onChange } = this.props;
onChange(id, this.state);
};
handleParentClick = parentVal => {
if (parentVal !== PARTIAL) {
this.setChildrenValue(parentVal);
}
};
render() {
const { parent, children } = this.state;
const { name } = this.props;
return (
<div
className={`an-panel expand-panel ${
this.state.navBarStatus ? "expand-open" : "expand-close"
}`}
>
<div
className="an-panel-header"
onClick={() => this.changeNavBar(this.state.navBarStatus)}
>
<div className="title-holder">
<span className="toggle-icon fa fa-plus-square" />
<span className="toggle-icon fa fa-minus-square" />
<h5>{name}</h5>
</div>
<div className="action-holder">
<div className="status-holder">
<ParentSwitch
childrenCount={children.length}
parentSwitch={parent.value}
onSelect={this.handleParentClick}
/>
</div>
</div>
</div>
{children.map(({ id, name, isEnabled }) => (
<div className="an-panel-body" key={id}>
<ul className="applications-list-holder">
<li>
<div className="name">{name}</div>
<div className="status">
<ChildSwitch
switchName={id}
selected={isEnabled}
onSelect={this.setChildSwitchValue}
/>
</div>
</li>
</ul>
</div>
))}
</div>
);
}
}

Answer 1

您要查找的是event.stopPropagation()。这会将event隔离到仅触发的执行块(及其子块)，同时忽略父标记中的任何events。

所以现在当你切换ParentSwitch它会触发父div的onClick处理程序，停止任何父事件的执行(如展开/折叠)。然后，执行onSelect事件。

创建一个事件处理程序来触发它，如下所示：

stopParentTrigger = e => {
e.stopPropagation();
};

然后将其用作包装ParentSwitch组件的div 的onClick处理程序。

<div className="status-holder" onClick={this.stopParentTrigger}>
<ParentSwitch
childrenCount={children.length}
parentSwitch={parent.value}
onSelect={e => this.handleParentClick(e)}
/>
</div>

请参阅工作沙盒：https://codesandbox.io/s/final-parent-child-qm61n