Reactjs

Question

我正在开发一个同位素应用程序 - 我想平滑这个应用程序，以便单击一个项目展开 - 但在单击另一个项目时 - 它会关闭最后一个 - 这是代码库 - 什么是最好的处理这个的方式。我目前的问题是可以一次打开多个单元格 - 我还没有弄清楚折叠非活动项目的逻辑。

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;

我不确定处理这个问题的更简单方法是什么——如果是将活动项目记录推回父级 shell IsotopeWrapper——并且如果拾取新的点击以关闭所有其他 IsotopePopClickEl 的 --

Answer 1

对于您提到的希望能够同时打开多个项目的方式，您做得很好。但是因为你每次只想打开，所以你应该将状态移动到父组件并且该状态应该是当前打开的元素的标识符，即元素的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 相同，如果为真，则附加 class.如果您将某些项目映射到那个 IsotopePopClickEl 组件，或者如果您只是将它们 copy/paste 映射到同一个父组件（第一个显然是更好的方法），就可以做到这一点。

在第一种方法中，您应该将新道具传递给 IsotopePopClickEl 以检查父项的状态是 expanded

Answer 2

我必须对您的 codesandbox 进行大量更改，因为现有代码几乎没有问题。更新和工作 codesandbox can be found here.

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

单击项目后立即通知 parent/container，以便父级可以更新其他项目的状态。为此，我从 IsotopePopClickEl 中删除了 state 并将其移动到 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
          />
        ),
        ...
      }
    ...
  }
}

最后，不确定您是否注意到，但我将 IsotopeWrapper class 中每个项目的 entity 属性替换为 buildEntity 函数，因为使用属性将在第一次创建视图后缓存视图，并且不会在新状态之后更新。更新 IsotopeHandler 以调用 buildEntity.

<div className="grid-item-wrapper">{item.buildEntity()}</div>

就这些了！

Reactjs - 同位素 - 单击时展开和折叠 - 但一次只有一个项目

Reactjs - Isotope - expand and collapse on click - but have ONLY one item at a time

javascript

jquery-isotope