如何对内部反应组件使用handleClick [英] How to use handleClick for internal react components

问题描述

我正在尝试使用handleClick链接到内部页面，但它不起作用。如果我使用一个实际的URL，例如LinkUrl=‘https://google.com’，它将工作得非常好。但是我有一个问题，那就是LinkUrl只接受实际的链接。我如何将其链接到内部页面。我尝试导入页面以使用它，如您在此处所见，但不起作用。

import React from "react";

class Cardlist extends React.Component {
    handleClick = () => {
      // this will open your link in new tab
      window.open(this.props.linkUrl, '_blank');
    }

    render() {
      return(
        <div className="cardlist">
        <div className="cardlist-body">
        <h2>{this.props.title}</h2><br/>
        <p>{this.props.text}</p><br/><br/>
        <button className="button-49" onClick={this.handleClick}>{this.props.btnlink}</button>
        </div>
        </div>
      )
    }
}

export default Cardlist;

import React from "react";
import Cardlist from "./Cardlist";
import Pm from "./pages/Pm";


const Services = () => {
    return(<section id="services">
    <div class="servicesContainer">
    
    <div class="servicesContent">
    <Cardlist 
      title="Pain Management" 
      text="We offer patients the very best pain medications and treatments. We advise our patients to seek treatment for their chronic pain and learn that management is possible with the right tools [...]" 
      btnlink ="Read More" 
      linkUrl='{<Pm/>}'
    />
       
    </div>
    
    <div class="servicesContent">
    <Cardlist 
      title="Dermatology" 
      text="The compounding pharmacist prepares therapies customized for the individual patient for a very wide range       of dermatological conditions. Such skin conditions can spell not only physical di [...]" 
      btnlink ="Read More" 
      linkUrl='your url to more info on Dermatology'
    />
    </div>

    <div class="servicesContent">
    <Cardlist
      title="Pediatric" 
      text="Children and medications often times just do not mix. Children often resist taking a medication because         they don’t like the taste. Swallowing pills is often difficult for younger children [...]" 
      btnlink ="Read More" 
      linkUrl='your url to more info on Pediatric'
    />
    </div>
    
    <div class="servicesContent">
    <Cardlist 
      title="Hormone Replacement Therapy" 
      text="Children and medications often times just do not mix. Children often resist taking a medication because         they don’t like the taste. Swallowing pills is often difficult for younger children [...]" 
      btnlink ="Read More" 
      linkUrl='your url to more info on Hormone Replacment Terapy'
    />
    </div>
</div>
</section>);
}

export default Services;

推荐答案

正如我在评论中建议的那样，您可以使用弹出窗口(模式对话框)来显示要向用户显示的组件。

对于本例，我将使用MUI Dialog，它只是Modals的一个变体。我部分借鉴了他们的demos

中的一个

import Dialog from '@mui/material/Dialog';
import React, {useState, useCallback} from "react";

const Cardlist = ({btnlink, title, text}) => {
    const [isLinkOpen, setIsLinkOpen] = useState(false);

    handleOpenLink = useCallback(() => {
      setIsOpen(true);
    }, []);

    handleCloseLink = useCallback(() => {
      setIsOpen(false);
    }, []);

    
    return(
        <>
        <Dialog
          fullScreen
          open={isLinkOpen}
          onClose={handleCloseLink}
        >
          {btnlink}
        </Dialog>
        <div className="cardlist">
        <div className="cardlist-body">
        <h2>{title}</h2><br/>
        <p>{text}</p><br/><br/>
        <button className="button-49" onClick={handleOpenLink } />
        </div>
        </div>
        </>
    );
}

export default Cardlist;

有关实施的其余部分，即要显示关闭按钮，请参阅链接的演示。

这篇关于如何对内部反应组件使用handleClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！