点击调整div尺寸

Question

点击调整div尺寸

3

我一直在尝试为div添加onClick事件，这个事件会在点击div时将其大小调整为全屏，但是当我点击一个div时，所有的div都被扩展了。如何限制只对单个div进行onClick事件并使该单个div调整为全屏？我还添加了一个过渡效果，使其看起来像动画，但当仅点击单个div时，所有的div都受到了影响。

import React from "react";
import "./styles.scss";

const colors = [
  "palevioletred",
  "red",
  "green",
  "blue",
  "yellow",
  "orange",
  "lightblue"
];

const randomColor = items => {
  return items[randomHeight(0, items.length)];
};

const randomHeight = (min, max) => {
  return Math.floor(min + Math.random() * (max - min + 1));
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      active: false
    };
  }
  addActiveClass() {
    const currentState = this.state.active;
    this.setState({ active: !currentState });
  }
  render() {
    return (
      <div class="container">
        {Array.from({ length: 30 }).map((item, index) => (
          <div
            key={index}
            style={{
              background: randomColor(colors),
              height: randomHeight(100, 200)
            }}
            className={this.state.active ? "full" : null}
            onClick={this.addActiveClass}
          />
        ))}
      </div>
    );
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
}

.container > * {
  border: 2px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

.full{
  width: 100%;
  height: 100%;
  transition: 2s;
}

codesandbox

- reactRookie

1

所有的 div 元素都在 state 中共享同一个布尔值。 - Pavlos Karalis

有没有一种方法可以为每个 div 分配自己的 onClick 处理程序？ - reactRookie

1

你尝试在事件处理程序中将样式添加到 e.target 中了吗？像这样 function(e){e.target.style = style} - nibble

@nibble 没有，我没有。我该怎么做呢？ - reactRookie

1

https://codesandbox.io/s/old-bush-gebdn 可能会有所帮助。 - Piyush

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muhammad Ali · Accepted Answer

目前，您正在与所有div共享一个状态。为了解决这个问题，创建activeIndex状态，可能使用-1进行初始化，并像这样使用它：

  // ...

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      activeIndex: -1
    };
  }
  addActiveClass(activeIndex) {
    this.setState(prev => ({
      activeIndex: prev.activeIndex === activeIndex ? -1 : activeIndex
    }));
  }

  render() {
    return (
      <div className="container">
        {Array.from({ length: 30 }).map((item, index) => {
          return (
            <div
              key={index}
              style={{
                background: randomColor(colors),
                height: randomHeight(100, 200)
              }}
              className={this.state.activeIndex === index ? "full" : ""}
              onClick={() => this.addActiveClass(index)}
            />
          );
        })}
      </div>
    );
  }
}