代码之家 › 专栏 › 技术社区 › Matin

一次点击显示的所有项目的模式(Reactjs)

react-modal reactjs javascript

Matin · 技术社区 · 2 年前

我有一个待办事项列表应用程序,我想在单击时显示任务的更多详细信息,因此我使用react modal包,当我单击一个项目时,所有项目都会弹出,而不是我单击的单个项目

import { useContext, useState } from "react";

import Task from "../task/task";
import { todosContext } from "../../context/todosContext";
import { motion, AnimatePresence } from "framer-motion";
import Modal from "react-modal";

const Search = (props) => {
  const [query, setQuery] = useState("");
  const { todos, setTodos } = useContext(todosContext);
  const [modalIsOpen, setIsOpen] = useState(false);
  const [openedId, setOpenedId] = useState("");

  const PER_PAGE = 4;
  Modal.setAppElement(document.getElementById("root"));

  function openModal() {
    setIsOpen(true);
  }
  function closeModal() {
    setIsOpen(false);
  }


  return (
    <StyledDiv>
     
      <AnimatePresence>
        {currentPageData.map((todo) => (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{
              opacity: 0,
              position: "absolute",
              y: -1000,
              transition: "1s",
            }}
            key={todo.id}
          >
            <Task
              onRequestOpen={openModal}
              key={todo.id}
              title={todo.title}
              description={todo.description}
              backgroundColor="#ffffff"
              disabled={loading}
              onClick={() => deleteHandler(todo.id)}
              placeholder={"completed"}
              onChange={(e) => processChange(e, todo.id)}
              checked={todo.completed}
              id={todo.id}
              htmlFor={todo.id}
              marginTop="-5px"
            ></Task>

            <Modal
              isOpen={modalIsOpen}
              onRequestClose={closeModal}
              style={customStyles}
              contentLabel="Example Modal"
            >
              <button onClick={closeModal}>close</button>
              {todo.description}
            </Modal>
          </motion.div>
        ))}
      </AnimatePresence>
  
    </StyledDiv>
  );
};

export default Search;

我自己的解决方案是建立一个称为 opendItemId 并在用户单击项目时将项目的id传递给它 isOpen={modalIsOpen(openedId === todo.id)}

1 回复 | 直到 2 年前

Apostolos Nirjal Mahat 2 年前

首先,您要创建N个模态,其中N是待办事项的数量。

所以模态应该在映射函数之外。然后,可以在状态中设置当前选定的待办事项,并将其加载到模式中。

const [currentTodo, setCurrentTodo] = useState(null);

  const openModal = todoItem => {
    setCurrentTodo(todoItem);
    setIsOpen(true);
  }

. .

        <Task
          onRequestOpen={() => openModal(todo)}
          key={todo.id}

        <Modal
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={closeModal}>close</button>
          {currentToDo.description}
        </Modal>