如何解决Reactjs-同位素-单击时可展开和折叠-但一次只能包含一项
我正在研究同位素应用程序-我想使该应用程序平滑,以便onclick展开一个项目-但单击另一个项目时-它关闭了最后一个-这是代码库-最佳方法是处理这个。目前,我的问题是它可以一次打开多个单元格-而且我还没有弄清楚折叠非活动项目的逻辑。
https://codesandbox.io/s/brave-sea-tnih7?file=/src/IsotopePopClickEl.js
IsotopePopClickEl。
import React,{ Component } from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
//import Rating from '@material-ui/lab/Rating';
//import parse from 'html-react-parser';
import "./IsotopePopClickEl.css";
class IsotopePopClickEl extends Component {
constructor(props,context) {
super(props,context);
this.state = { expanded: false };
this.onClick = this.onClick.bind(this);
}
expand() {
this.setState({
expanded: true
});
}
collapse(event) {
this.setState({
expanded: false
});
}
onClick() {
if (this.state.expanded) {
this.collapse();
} else {
this.expand();
}
}
render() {
return (
<div
className={
"isotope-pop-click " +
(this.state.expanded ? "is-expanded" : "is-collapsed")
}
onClick={this.onClick}
>
<div className="frontFace">
<Grid container spacing={0}>
<Grid item xs={12} sm={12}>
<div className="image-wrapper">
<img
className="image-item"
src={this.props.item.image}
alt=""
/>
</div>
<h3>{this.props.item.label}</h3>
</Grid>
</Grid>
</div>
<div className="backFace">
<Grid container spacing={0}>
<Grid item xs={12} sm={5}>
<div className="image-wrapper">
<img
className="image-item"
src={this.props.item.image}
alt=""
/>
</div>
</Grid>
<Grid item xs={12} sm={7}>
<h3>{this.props.item.label}</h3>
<div>
<p>some body text text text text</p>
</div>
<div>
<Button variant="contained" color="primary">
Read more
</Button>
</div>
</Grid>
</Grid>
</div>
</div>
);
}
}
export default IsotopePopClickEl;
我不确定有什么更简单的方法来处理此问题-如果是将活动项记录推回父外壳IsotopeWrapper的情况-如果选择了新的单击以关闭所有其他IsotopePopClickEl的事件-
解决方法
我必须对您的codeandbox进行大量更改,因为现有代码几乎没有问题。已更新并可以使用codesandbox can be found here。
让我们来看看我所做的更改:
- 单击项目后立即通知父项/容器,以便父项可以更新其他项的状态。为此,我从
state
中删除了IsotopePopClickEl
并将其移至IsotopeWrapper
,其中包装器将在每个项目上设置selected
属性,以指示是否选中了该项目(或者您可以调用它扩大了!)还是没有。
class IsotopePopClickEl extends Component {
...
onClick() {
this.props.onClick();
}
render() {
return (
<div
className={
"isotope-pop-click " +
(this.props.item.selected ? "is-expanded" : "is-collapsed")
}
onClick={this.onClick}
>
...
);
}
}
- 更新(选中)每个项目的状态,以便
IsotopePopClickEl
可以确定要扩展到的项目:
class IsotopeWrapper extends Component {
constructor(props,context) {
super(props,context);
this.state = {
resultsList: [
// items in the list
]
};
}
onClick(item) {
const newList = this.state.resultsList.map((i) => {
i.selected = i === item;
return i;
});
this.setState({
resultsList: newList
});
}
render() {
let items = [
{
buildEntity: () => ( // <- converted entity prop to method
<IsotopePopClickEl
item={this.state.resultsList[0]} // <- use item from the state
onClick={() => this.onClick(this.state.resultsList[0])} // <- attach click handler
/>
),...
}
...
}
}
- 最后,不确定是否注意到了,但是我将
entity
类中IsotopeWrapper
类中每个项目的buildEntity
属性替换为IsotopeHandler
函数,因为使用属性会在第一次创建视图后缓存视图,病房恢复新状态后不会更新。更新buildEntity
以呼叫<div className="grid-item-wrapper">{item.buildEntity()}</div>
。
import numpy as np
a1 = np.arange(6)
a2 = np.arange(6)
a3 = np.arange(6)
a4 = np.arange(6)
a5 = np.arange(6)
oo = np.einsum('i,j,k,l,m',a1,a2,a3,a4,a5)
仅此而已!
,对于您希望同时打开多个项目的方式,您做得不错。但是,由于您每次只想打开一次,因此您应该将状态移动到父组件,并且该状态应该是当前通过其打开的元素的标识符,即元素的ID。
因此,您最终应该得到以下内容:
this.state = { expanded: "itemId" }
您的onclick方法将类似于:
onClick(e) {
this.setState({ expanded: e.target.id }) // use the identifier that you want
}
在每个IsotopePopClickEl
中,您只需检查元素的id
(或任何其他元素)是否与this.state.expanded
相同,如果为true,则追加该类。如果您将某些项目映射到该IsotopePopClickEl
组件,或者只是将它们复制/粘贴到同一父组件,则可以做到这一点(显然,第一个是更好的方法)。
在第一种方法中,您应该将新道具传递给IsotopePopClickEl
,以检查父项的状态为expanded
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。