reactjs - ReactJs 将活动类添加到 DIV

Question

我有 3 个 DIV，动态创建。我的目标是：当单击任何 div 以向其添加活动类时，当然，如果任何其他人有该活动类来删除它。我怎样才能做到这一点？

import React, { useState } from "react";
import "./styles/App.css";
import { Container, Box, Typography, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  mainBox: {
    display: "flex",
    justifyContent: "space-evenly"
  },
  mybox: {
    backgroundColor: "#9fa8da",
    padding: "40px",
    color: "#fff",
    maxWidth: 300
  }
});

function App() {
  const clasess = useStyles();

  const [active, setactive] = useState("");

  const mydata = [
    {
      id: 1,
      name: "Ganesh",
      des: "UI Developer"
    },
    {
      id: 2,
      name: "Suresh",
      des: "Accountant"
    },
    {
      id: 3,
      name: "Srikanth",
      des: "Digital"
    }
  ];

  const onClick = index => {
    setactive("active");
  };

  return (
    <Container>
      <Box className={clasess.mainBox}>
        {mydata.map((val, index) => {
          return (
            <>
              <Box
                boxShadow={1}
                key={index}
                onClick={e => {
                  onClick(index);
                }}
                className={active}
              >
                <Typography variant="h4">{val.name}</Typography>
                <Typography>{val.des}</Typography>
              </Box>
            </>
          );
        })}
      </Box>
    </Container>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我有 3 个 DIV，动态创建。我的目标是：当单击任何 div 以向其添加活动类时，当然，如果任何其他人有该活动类来删除它。我怎样才能做到这一点？

我有 3 个 DIV，动态创建。我的目标是：当单击任何 div 以向其添加活动类时，当然，如果任何其他人有该活动类来删除它。我怎样才能做到这一点？

标签： reactjs

Answer 1

尝试检查活动 id 何时是点击的 id：

import React, { useState } from "react";
import "./styles/App.css";
import { Container, Box, Typography, makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  mainBox: {
    display: "flex",
    justifyContent: "space-evenly"
  },
  mybox: {
    backgroundColor: "#9fa8da",
    padding: "40px",
    color: "#fff",
    maxWidth: 300
  }
});

function App() {
  const clasess = useStyles();

  const [active, setActive] = useState();

  const mydata = [
    {
      id: 1,
      name: "Ganesh",
      des: "UI Developer"
    },
    {
      id: 2,
      name: "Suresh",
      des: "Accountant"
    },
    {
      id: 3,
      name: "Srikanth",
      des: "Digital"
    }
  ];

  const onClick = id => {
    setActive(id);
  };

  return (
    <Container>
      <Box className={clasess.mainBox}>
        {mydata.map((val, index) => {
          return (
            <>
              <Box
                boxShadow={1}
                key={index}
                onClick={e => {
                  onClick(val.id);
                }}
                className={val.id == id ? active : deactive}
              >
                <Typography variant="h4">{val.name}</Typography>
                <Typography>{val.des}</Typography>
              </Box>
            </>
          );
        })}
      </Box>
    </Container>
  );
}

export default App;