5

我正在使用 Grommet 并试图在按下按钮时让Layer（几乎是一个模态）工作。我知道我的 onClick 有效，因为我尝试了一个简单的 console.log 并且它有效。如果我使用 ReactDOM 并渲染它，MyModal 也可以显示。我认为我的问题与我如何调用它或返回它有关？我希望在单击按钮时显示模态。

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>
    );
  }
};

主.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>
    );
  }
};
4

1 回答 1

5

问题：
您正在尝试将您的 Modal 渲染为内联onClick处理程序。

建议的解决方案：

  • 在状态中设置一个值以在显示模式时处理

  • 设置onClick以切换此值

  • 使用此状态在 render 中调用另一个方法来有条件地渲染 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>
    );
  }
};
/
于 2016-11-25T23:19:49.117 回答