反应切换菜单

Question

我正在尝试通过此示例构建一个向右切换菜单：how-to-build-a-sliding-menu-using-react-js"

问题是 React.createClass 已被弃用，所以我必须更改代码，它停止工作我得到了内容但无法访问处理程序谁能告诉我我应该采取哪些步骤来解决这个问题！所以如果我点击我的按钮，我会收到这个错误：

Uncaught TypeError: Cannot read property 'show' of undefined

切换菜单

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './ToggleMenu.scss';
import { themr } from 'react-css-themr';
import { Menu } from '../../components';
import { MenuItem } from '../../components';

@themr('ToggleMenu', localStyles)

export default class ToggleMenu extends React.Component {

  showRight() {
    this.refs.right.show();
  }

  constructor(props) {
    super(props);
    this.showRight = this.showRight.bind(this);
  }

  render() {

    return (
      <div>
      <button onClick={this.showRight}>Show Right Menu!</button>
      <Menu ref={right => this.right = right} alignment="right">
      <MenuItem hash="first-page">First Page</MenuItem>
      <MenuItem hash="second-page">Second Page</MenuItem>
      <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>
      </div>
    );
  }
}

菜单

import React from 'react';

export default class Menu extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false
        }
    };

    show() {
        this.setState({visible: true});
        document.addEventListener("click", this.hide.bind(this));
    }

    hide() {
        this.setState({visible: false});
        document.removeEventListener("click", this.hide.bind(this));
    }

    render() {
        return (
            <div className="menu">
                <div className={(this.state.visible ? "visible " : "") + this.props.alignment}>{this.props.children}</div>
            </div>
        );
    }
}

菜单项

import React from 'react';

export default class MenuItem extends React.Component {
    navigate(hash) {
        window.location.hash = hash;
    }

    render() {
        return (
            <div className="menu-item" onClick={this.navigate.bind(this, this.props.hash)}>{this.props.children}</div>
        );
    }
}

Answer 1

问题是您将引用分配给 this.right，您需要将 showRight 方法更新为如下内容：

showRight() {
  this.right.show();
}

我还会使用箭头函数来避免在构造函数中绑定函数。

import React, { PureComponent } from 'react';

export default class ToggleMenu extends PureComponent {

  showRight = () => {
    this.right.show();
  }

  render() {

    return (
      <div>
      <button onClick={this.showRight}>Show Right Menu!</button>
      <Menu ref={right => this.right = right} alignment="right">
      <MenuItem hash="first-page">First Page</MenuItem>
      <MenuItem hash="second-page">Second Page</MenuItem>
      <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>
      </div>
    );
  }
}

并确保使用 PureComponent 以避免在不需要时渲染组件。

编辑：

Menu class 不是反应方式，如果你想隐藏一个元素你应该做如下的事情：

import React from 'react';

export default class Menu extends React.Component {
    state = {
      visible: false,
    };

    show() {
      this.setState({ visible: true });
    }

    hide() {
      this.setState({ visible: false });
    }

    render() {
      const { visible } = this.state;

      return (
        <div className="menu">
          { 
            visible &&
              <div className={this.props.alignment}>{this.props.children}</div>
          }
        </div>
      );
    }
}

如果 visible === true 则 div 将呈现，否则不会呈现。我删除了侦听器，我们不会在反应中这样做，相反，您需要在您希望用户单击以隐藏菜单的元素上定义一个 onClick 回调。

反应切换菜单

React Toggle Menu

event-handling

toggle

ecmascript-6

reactjs