使用带有按钮的 react-router-dom 链接答案

【问题标题】：using react-router-dom links with butttons使用带有按钮的 react-router-dom 链接
【发布时间】：2020-11-05 09:51:32
【问题描述】：


<Link to='https://www.gofundme.com/f/moorhead-mosque-foundation'><Button type="button" className="btn btn-info">Button</Button></Link>

还有什么其他方法可以同时使用链接和按钮？我将这个按钮放在轮播中。我见过其他人使用 onCLick() { window.open('某事') } 并将其作为道具传递给按钮。我在数组中有这个按钮，所以我不能这样做。当我点击它时，如何让这个按钮转到上面的 goFundMe？

【问题讨论】：

我的意思是，您可以将链接样式设置为按钮？
为什么需要在Link 中添加一个按钮？ Link 基本上是 <a href=""></a>
也许检查这个答案，这可能会有所帮助：stackoverflow.com/a/44563899

标签： javascript reactjs button hyperlink react-router-dom

【解决方案1】：

正如人们在 commnet 中所写的那样，链接内的按钮并没有真正使用，只需添加即可

display:block;
text-decoration:none

您可以控制 a 标签的外观

【讨论】：

【解决方案2】：

创建一个函数doSomething，该函数接受一个值并在单击按钮时调用该值

class PageView extends React.Component{
  doSomething=(link)=>{
    this.props.history.push(link);
  }
  render(){
  return(
   data_array.map((data,index)=>
   <div key={index} id="carousel">
    <Button onClick{()=>this.doSomething(data.link)}>MY BUTTON</Button>
   </div>)
  )}
}

【讨论】：

【解决方案3】：

试试这个方法：

class Panel extends React.Component {
  constructor(props){
    super(props);
    this.state = { arr: [{key: 1}, {key: 2}] }
  }
//...
onBtnClick = (key) => { //.. }

render(){
    return ( 
      this.state.arr.map(item => 
         <Link to='..'>
           <Button onclick={()=>this.onBtnClick(item.key)}>Button</Button>
         </Link>
))}

【讨论】：