javascript - 在 ReactJS 上处理事件

Question

我是 ReactJS 的新手，尝试使用 ReactJS 创建模式窗口组件，但遇到了一些麻烦。我有一个触发模式窗口的链接，并希望该组件在单击触发链接时在“显示”和“隐藏”之间切换。

下面是我的代码:

我调用 ModalDialog 组件的组件:

import React from 'react';
import styles from './Cover.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import ModalDialog from '../ModalDialog';
import Avatar from './Avatar';

import { Button } from 'react-bootstrap';

@withStyles(styles)

class Cover {

  render() {
    return (
      <div className="Cover">

        <a href="#" onClick={}></a>

        <ModalDialog heading="heading">
          <p>Body</p>
        </ModalDialog>
        <div className="Cover-container">
          <div>
            <Avatar 
              username="hilarl" 
              profession="Web Developer" 
              location="New York, New York"
              status="I am here to protect my business, a bunch of kids are out to ruin me" />
              <div className="Cover-submenu-container">
                <div className="Cover-submenu-section">
                  .
                </div>
                <div className="Cover-submenu-section links">
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-twitter"></i>
                  </a>
                </div>
                <div className="Cover-submenu-section connect-menu">
                  <Button bsStyle='primary' href="/follow" onClick={Link.handleClick}>Follow</Button>
                </div>
              </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cover;


The ModalDialog Component:

import React from 'react';
import styles from './ModalDialog.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';

import { Button } from 'react-bootstrap';

@withStyles(styles)

class ModalDialog {

  render() {
    return (
      <div className="Overlay">
        <Modal heading={this.props.heading}>
          <div>{this.props.children}</div>
        </Modal>
      </div>
    );
  }
};

class Modal {

  render() {
    return (
      <div className="Modal effect" >
        <h3>{this.props.heading}</h3>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
};

export default ModalDialog;

我已将可见性设置为默认隐藏，并尝试设置 .show 类以使其可见:

.Overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  background: rgba(255,255,255,0.9);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.show ~ .Overlay  {
  opacity: 1;
  visibility: visible;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}

非常感谢任何帮助。谢谢

Answer 1

我经历了惨痛的教训才知道，在 React 中，渲染或不渲染都更好。更改显示/隐藏 css 类是一种命令式/jQuerish 心态。不要告诉 React 如何实现隐藏/显示，而是告诉 React 你想要渲染什么。

import Modal from './Modal';

class Cover extends React.Component {

    constructor() {
        this.state = { showModal: false };
    } 

    handleClick(event) {
        this.setState({ showModal: true });
    }

    render() {

        return (
            <div>
                <Modal show={this.state.showModal} />
                <button onClick={this.handleClick.bind(this)}>
                    Click me!
                </button>
            </div>
        );
    }
}


class Modal extends React.Component {
    render() {
        if (this.props.show) {
            return (/* The modal panel */);
        }
        return null;
    }
}