Question

我尝试在用户点击菜单时激活抽屉，但我的解决方案不起作用。你能帮帮我吗？

父

import React, { Component } from 'react';
// Import Appbar
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import LeftMenu from './Left_menu';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
  }
  handleToggle() {
    this.setState({open: !this.state.open});
  }

  handleClose() {
      this.setState({open: false});
  }

  render() {
    return(
      <div>
        <AppBar
        title="Log"
        onLeftIconButtonTouchTap={this.handleToggle.bind(this)}
        />
        <Drawer
          docked={false}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <LeftMenu handleClose={this.handleClose} />
        </Drawer>
      </div>
    );
  }
};

export default Header;

子

import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';

class LeftMenu extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
          <MenuItem onTouchTap={(event) => this.props.handleClose(event)}>Menu Item</MenuItem>
          <MenuItem onTouchTap={(event) => this.props.handleClose(event)}>Menu Item 2</MenuItem>
      </div>
    );
  }
}

export default LeftMenu;

我收到一条消息：TypeError：this.setState不是函数

我正在使用Meteor + React + MaterialUI

由于

Answer 1

你不应该setState render中的onRequestChange，从handleToggle中取出这个逻辑，就像你使用handleClose和<Drawer docked={false} open={this.state.open} onRequestChange={(open) => this.setState({open})} // this.handleRequest?? >一样：

<div on-mouseover='over()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div>

over(){
    console.log("Mouseover called");
  }

Answer 2

解决。

在父母

中

<LeftMenu handleClose={this.handleClose.bind(this)} />

在孩子中

<MenuItem onTouchTap={this.props.handleClose}>Menu Item</MenuItem>
<MenuItem onTouchTap={this.props.handleClose}>Menu Item 2</MenuItem>

非常感谢。

在Reactjs中调用Parent函数（在菜单项中激活Drawer点击Material-ui）

2 个答案: