css - 基于行 onclick 动态呈现模式 - ReactJS

Question

正在为一个未公开的项目工作，其中有关患者的数据从他们的 api 中提取并作为模式加载到页面上。当您单击模态时，威胁的更多信息将被拉出为模态。这里的目标是让他们根据 div 在有人点击它时进行渲染。

如何在每次点击时正确地将数据从 api 发送到模态组件？

单击时类似于 div 表

import React, {useState,useEffect} from 'react';

const keys = Object.keys(arr[0]);

// const handleOnClick = param => {
//   console.log('do something: ', param);
// }

export default function Demo() {
  const [isModalOpen, setModalIsOpen] = useState(false);
  const [users, setUsers] = useState([]);

    const toggleModal = () => {
        setModalIsOpen(!isModalOpen);
  };
  
  const handleOnClick = () => {
    toggleModal()
  };

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;
        setUsers(data);
      } catch (err) {
        console.error("failed", err);
      }

      setModalIsOpen(false);
    };

    fetchUsers();
  }, []);

  return (
    <div className="container">
        <>
          {keys.map((key) => (
            <div className="col" key={key}>
              <div className="row">{key}</div>
                {arr[0][key].map((item) => (
                  <div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
                ))}
            </div>
          ))}
        </>
        {isModalOpen && <Modal onRequestClose={handleOnClick} data={users}/>}
      </div>
  );
}

模态的

import React, { useEffect } from "react";

const Modal = ({ onRequestClose, data }) => {
    // Use useEffect to add an event listener to the document
    useEffect(() => {
        function onKeyDown(event) {
            if (event.keyCode === 27) {
                // Close the modal when the Escape key is pressed
                onRequestClose();
            }
        }

        // Prevent scolling
        document.body.style.overflow = "hidden";
        document.addEventListener("keydown", onKeyDown);

        // Clear things up when unmounting this component
        return () => {
            document.body.style.overflow = "visible";
            document.removeEventListener("keydown", onKeyDown);
        };
    });

    return (
        <div className="modal__backdrop">
            <div className="modal__container">
                <div className="modal-header">
                    <div className="modal-close" onClick={onRequestClose}>
                        <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>
                </div>
                <div className="job-title-wrapper">
                    <div className="job-card-title">{data}</div>
                </div>
            </div>
        </div>
    );
};

export default Modal;

标签： cssreactjstypescript

Answer 1

如果我理解正确，您想在用户单击一行时进行特定的 API 调用并将其数据设置为模式，对吗？

您当前通过您所做的useEffect只是每次组件中的某些内容更新时总是获取用户数据，根据您的描述，这可能不是您想要的。因此，您可能可以完全删除该块。

相反，您希望在单击该行时调用该 API，因此看起来更合适的位置是在您的handleOnClick函数上。它应该看起来像这样：

  const handleOnClick = async () => {
     try {
        const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;

        setUsers(data);

        // Now that the data has been fetched, open the modal
        setModalIsOpen(true);
      } catch (err) {
        console.error("failed", err);
      }
  };

像这样，在打开模式时，数据应该全部设置为您的user状态。通过这些更改，您的Demo组件应如下所示：

export default function Demo () {
 const [isModalOpen, setModalIsOpen] = useState(false);
  const [users, setUsers] = useState([]);
 
  const handleOnClick = async () => {
     try {
        const { data } = await axios.get('https://gist.githubusercontent.com/SkyBulk/a75a32254d58aea2cf27cbb43117a2f4/raw/eb5f85560c0dfd74a4aab9db755ac5a06f0627c2/api.json').results;

        setUsers(data);

        // Now that the data has been fetched, open the modal
        setModalIsOpen(true);
      } catch (err) {
        console.error("failed", err);
      }
  };


  return (
    <div className="container">
        <>
          {keys.map((key) => (
            <div className="col" key={key}>
              <div className="row">{key}</div>
                {arr[0][key].map((item) => (
                  <div className="row" key={item.technique_id} onClick={() => handleOnClick(item)}>{item.technique}</div>
                ))}
            </div>
          ))}
        </>
        {isModalOpen && <Modal onRequestClose={() => setModalIsOpen(false)} data={users}/>}
      </div>
  );
}