Почему модель не отображается, как указано в документе?

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

Здесь проблема в том, что вы никогда не устанавливая вашу modalIsOpen переменных состояний верно.

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

Когда пользователь нажимает на кнопку выше, вы вызываете openModal функцию. Внутри вы должны установить modalIsOpen в true.

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

И, я думаю, что вам нужно изменить afterOpenModal функцию, как он будет немедленно modalIsOpen ложь, как только открывается модально. Таким образом, вы можете просто прокомментировать этот код, если он не нужен, и, наконец, 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