Javascript 将ReactModal按钮与Href一起使用，不起作用。不确定为什么

我是一个相当新的反应和重做我的个人网站在反应。我遇到的问题是，在每个公文包演示中链接（带有href）到我的JSFIDLE的按钮不起作用。我不确定我是否没有正确绑定，或者问题到底是什么，除了打开模式时，演示按钮不起作用。关闭模式按钮工作正常。请参阅下面的代码

import React from 'react';
import ReactModal from 'react-modal';

class Project extends React.Component {
constructor () {
    super();
        this.state = {
          showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

handleOpenModal() {
    this.setState({ showModal: true});
}

handleCloseModal() {
    this.setState({ showModal: false});
}

componentWillMount() {
    ReactModal.setAppElement('body');
}

render() {
    const { details } = this.props;

    return (
        <li className="Project">
            <div onClick={this.handleOpenModal}>
                <img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
                <div className="Project-overlay">
                    <p>{details.name}</p>
                </div>
            </div>
            <div >
                <ReactModal 
                    isOpen={this.state.showModal} 
                    contentLabel="This is my Modal" 
                    shouldCloseOnOverlayClick={true}
                    onRequestClose={this.handleCloseModal}
                >
                  <div className="modal-header">
                      <h3>{details.name}</h3>
                  </div>
                  <div className="modal-body">
                      <img className="Project-image" src={'projects/' + details.image} alt={details.name} />
                      <p className="desc-body">{details.desc}</p>
                      <p className="desc-body">{details.link}</p>
                  </div>
                  <div className="modal-footer">
                      { details.havLink && <button className="button" href={details.link}>Click for Demo!</button> }
                      <button className="button" onClick={this.handleCloseModal}>Close Modal</button>
                  </div>
                </ReactModal>

            </div>
            <div className="Project-tag">
                <p>{details.tag}</p>
            </div>
        </li>
    )
  }
}

const props = {};

export default Project;

从“React”导入React；
从“反应模态”导入反应模态；
类项目扩展了React.Component{
构造函数（）{
超级（）；
此.state={
showModal:错误
};
this.handleOpenModal=this.handleOpenModal.bind（this）；
this.handleCloseModal=this.handleCloseModal.bind（this）；
}
handleOpenModal（）{
this.setState（{showmodel:true}）；
}
handleCloseModal（）{
this.setState（{showmodel:false}）；
}
组件willmount（）{
ReactModal.setAppElement（“主体”）；
}
render（）{
const{details}=this.props；
返回(

{details.name}

{details.name}
{details.desc}
{details.link}
{details.havLink&点击演示！}
闭合模态
{details.tag}


)
}
}
const props={}；
导出默认项目；

问题位于“modal footer”类的第一行。此按钮将显示havLink属性是否为true。此数据正在从另一个JS文件导出。所有其他内容（图像、描述、模式标题）都正确导入，即使是我设置的链接也正确导入，但按下按钮时，不会触发我预期的任何内容。我也没有在我的React dev工具中看到任何错误

{details.link}作为href没有将我路由到指定的链接。链接将显示在段落标记中（只是为了查看是否填充了正确的链接）

---

如果还需要什么，请告诉我，我希望解决方案像不正确的绑定一样简单。提前谢谢你

没有

href

属性。您应该使用锚元素

。你可以将任何你想让它看起来像按钮的

类

或

样式

传递到锚元素，但它仍然是锚元素，而不是按钮。

哇，我在玩不同的标签。。。。那让我觉得自己很笨。我忽略了一个愚蠢的错误。但是非常感谢你！我只是把它改成了a标签，这是我原来的标签名。。。。哇，这些小东西