ReactModalボタンをHrefで使用していて、動作していません。わからない理由

私はかなり新しく反応しており、私の個人的なサイトを反応させました。私が実行している問題は、各ポートフォリオのデモが機能していないため、JSfiddleに（hrefで）リンクするボタンです。私が正しくバインドしなかったか、モーダルが開いているとき以外の問題が正確であるかどうかは分かりません。デモボタンは機能しません。モーダルボタンを閉じると正常に動作します。以下のコードをご覧ください。ReactModalボタンをHrefで使用していて、動作していません。わからない理由

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;

問題は "モーダルフッタ"クラスの最初の行にあります。このボタンは、havLinkプロパティがtrueの場合に表示されます。このデータは別のJSファイルからエクスポートされています。他のすべてのもの（画像、説明、モーダルタイトル）はすべて正しくインポートされます。リンクを正しく設定しても、ボタンは押されても何も起こりません。私は自分のReact開発ツールにもエラーは見られません。

{details.link}はhrefとして指定されたリンクに私をルーティングしていません。リンクは段落タグに表示されます（リンクが正しく挿入されているかどうかを確認するだけです）。

他に何かが必要な場合は、解決策が間違ったバインディングと同じくらい簡単であることを願っています。前もって感謝します！

出典

2017-12-12 SpaghettiBathtub