如何使道具按钮链接可点击

Question

我有一个React卡组件，如下代码所示：

import React from "react";
class Cardlist extends React.Component {
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">{this.props.btnlink}</button>
</div>
</div>
)
}
}
export default Cardlist;




import React from "react";
import Cardlist from "./Cardlist";
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"/>

</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"/>
</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"/>
</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" />
</div>
</div>
</section>);
}
export default Services;

很明显，正如你所看到的，我无法将链接传递到btnlink="阅读更多"；。什么时候是为每个按钮分配自己的链接(外部或内部链接(的最佳和最简单的方法？

你可以在现场网站上看到设计：http://fusionrxny.com

Answer 1

您需要在按钮元素上有一个onClick监听器

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";
class Cardlist extends React.Component {
render() {
return(
<div className="cardlist">
<div className="cardlist-body">
<h2>{this.props.title}</h2><br/>
<p>{this.props.text}</p><br/><br/>
<a className="button-49" href={this.props.linkUrl}>{this.props.btnlink}</button>
</div>
</div>
)
}
}
export default Cardlist;

你可以提供不同的url，比如这个

import React from "react";
import Cardlist from "./Cardlist";
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='your url to more info on Pain Managment'
/>

</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;