Реакция на вызов другого компонента

Question

Я использую Grommet и пытаюсь получить Layer (в значительной степени модальный) для работы при нажатии кнопки. Я знаю, что мой onClick работает, потому что я попробовал простой console.log, и он работает. MyModal также может отображаться, если я использую ReactDOM и выношу его. Я думаю, что моя проблема имеет какое-то отношение к тому, как я называю это или возвращаю его? Я хочу, чтобы модальная информация отображалась при нажатии кнопки.

MyModal.js

import React, { Component } from 'react'; 
import Layer from 'grommet/components/Layer'; 
import Header from 'grommet/components/Header'; 
import Heading from 'grommet/components/Heading'; 
import Section from 'grommet/components/Section'; 
import Paragraph from 'grommet/components/Paragraph'; 

export default class MyModal extends Component { 
    render() { 
    return (
     <Layer closer={true} align="top"> 
      <Header> 
       <Heading tag="h2"> 
        Title 
       </Heading> 
      </Header> 
      <Section> 
       <Paragraph> 
        This is a simple dialog. 
       </Paragraph> 
      </Section> 
     </Layer> 
    ); 
    } 
}; 

Main.js

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import App from 'grommet/components/App'; 
import Button from 'grommet/components/Button'; 
import MyModal from './components/MyModal'; 

export default class Main extends Component { 
    getComponent(event) { 
    return <MyModal/>; 
    } 
    render() { 
    return (
     <App centered={false}> 
      <Button onClick={this.getComponent.bind(this)} label="Action" /> 
     </App> 
    ); 
    } 
}; 

Answer 1

Этот вопрос:
Вы пытаетесь сделать ваш Modal в рядного onClick обработчика.

РЕКОМЕНДУЕМОГО РЕШЕНИЯ:

• установить значение в состоянии обрабатывать, когда модальный показан

• установить onClick для переключения этого значения

• использования этого состояния вызвать другой метод в рендеринг для условного рендеринга Modal

Что ваш код может быть изменен:

export default class Main extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showModal: false // set a value in state to store whether or 
          // not to show the Modal 
    }; 

    // I've just put these binding in the constructor 
    // so as not to clock up the render method and they only 
    // get called once during the lifetime of the component 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick(event) { // switch the value of the showModal state 
    this.setState({ 
     showModal: !this.state.showModal 
    }); 
    } 
    getComponent() { 
    if (this.state.showModal) { // show the modal if state showModal is true 
     return <MyModal/>; 
    } else { 
     return null; 
    } 
    } 
    render() { 
    return (
     <App centered={false}> 
     <Button onClick={this.handleClick} label="Action"/>
  {this.getComponent} // call the method to render the modal here. 
     </App> 
    ); 
    } 
}; 
/