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。

让我们来看看我所做的更改：

1. 单击项目后立即通知父项/容器，以便父项可以更新其他项的状态。为此，我从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}
      >
      ...
    );
  }
}

1. 更新（选中）每个项目的状态，以便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
          />
        ),...
      }
    ...
  }
}

1. 最后，不确定是否注意到了，但是我将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