なぜモデルがドキュメントに示されているように表示されないのですか？

Question

は、私はこれを実装しようとしたこの文書 https://www.npmjs.com/package/react-modal

を見ましたが、それはなぜ任意のものが表示されませんか？ それはここにも を任意のエラーを与えていない私のコードは、そうでない場合はそれらを見つけることができませんリアクト https://plnkr.co/edit/aRPfONa55Cn7GTCItDbH?p=preview 更新あなたはあなたの方法をバインドする必要が

https://plnkr.co/edit/aRPfONa55Cn7GTCItDbH?p=preview

const Modal = ReactModal; 
class Main extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { modalIsOpen: false }; 
    } 
function closeModal() { 
    this.setState({modalIsOpen: false}); 
    } 
    function afterOpenModal() { 
    this.setState({modalIsOpen: false}); 
    } 
    function openModal() { 
    this.setState({modalIsOpen: false}); 
    } 
    render() { 
    return (
     <div> 
     <button onClick={this.openModal}>Open Modal</button> 
     <Modal 
      isOpen={this.state.modalIsOpen} 
      onAfterOpen={this.afterOpenModal} 
      onRequestClose={this.closeModal} 
      style={customStyles} 
      contentLabel="Example Modal" 
     > 

      <h2 ref="subtitle">Hello</h2> 
      <button onClick={this.closeModal}>close</button> 
      <div>I am a modal</div> 
      <form> 
      <input /> 
      <button>tab navigation</button> 
      <button>stays</button> 
      <button>inside</button> 
      <button>the modal</button> 
      </form> 
     </Modal> 
     </div> 
    ) 
    } 
} 


ReactDOM.render(
    <Main/>, 
    document.getElementById('root') 
); 

Answer 1

、問題は決してtrueにごmodalIsOpen状態変数を設定されていないということです。

<button onClick={this.openModal}>Open Modal</button> 

ユーザーが上記のボタンをクリックすると、openModalが呼び出されます。その内部にはmodalIsOpenをtrueに設定する必要があります。

function openModal() { 
    this.setState({modalIsOpen: true}); 
} 

そして、私はまた、モーダルがオープンしたら、それはすぐにfalseにmodalIsOpenを設定しますと、あなたのafterOpenModal機能を変更する必要があると思います。したがって、必要でない場合は、そのコードをコメントアウトするだけで、最後にonRequestCloseを呼び出してcloseModal関数を呼び出すと、状態変数modalIsOpenがfalseに設定され、モーダルがビューから非表示になります。

Answer 2

です。

constructor(props) { 
    super(props); 
    this.state = { modalIsOpen: false }; 
    this.closeModal.bind(this); //etc. 
    } 

はまた、あなたがES6をサポートしている場合=>キーなどを使用することを行う必要はありません。

function closeModal =() => { 
    this.setState({modalIsOpen: false}); 
    } 

リアクトドキュメンタリーを約handling eventsここ