React Material UI点击图标无法触发Dialog弹窗问题求助

你遇到的核心问题是对React组件渲染逻辑的理解偏差：你的showDialoga()函数是返回一段JSX代码，但你在onClick里直接调用它，并不会把这段JSX渲染到页面中——React的组件渲染是在render()方法里统一处理的，单独调用返回JSX的函数只会得到一段虚拟DOM代码，不会触发组件更新或把元素添加到真实DOM里。这也是为什么console.log能正常执行（只是普通函数调用），但弹窗没反应的原因。

修正步骤 #

1. 保留你已经定义的handleOpen、handleClose方法和open状态（用来控制弹窗的显示/隐藏）
2. 把弹窗的JSX代码直接移到组件的render()方法里，通过this.state.open控制它的显示
3. 在图标的onClick事件里直接调用handleOpen来修改状态，触发组件重新渲染

修正后的代码示例 #

import React, { Component } from 'react';
import { GridList, GridTile } from 'material-ui/GridList';
import FlatButton from 'material-ui/FlatButton';
import Info from 'material-ui/svg-icons/action/info';
import { fullWhite } from 'material-ui/styles/colors';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    // 务必绑定this，避免点击时this指向错误
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({ open: true });
  }

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

  render() {
    // 把弹窗的操作按钮定义在render里
    const actions = [
      <FlatButton label="Cancel" primary onClick={this.handleClose} />,
      <FlatButton label="Submit" primary keyboardFocused onClick={this.handleClose} />
    ];

    console.log(this.props);
    return (
      <div style={styles.root}>
        <GridList cellHeight={180} style={styles.gridList} padding={10}>
          {this.props.movieData.map(tile => (
            <GridTile 
              key={tile.original_image} 
              title={tile.title} 
              actionIcon={
                <FlatButton 
                  icon={<Info color={fullWhite} />} 
                  style={style} 
                  onClick={this.handleOpen} // 直接调用handleOpen改变状态
                />
              }
            >
              <img src={tile.original_image} />
            </GridTile>
          ))}
        </GridList>
        {/* 把弹窗直接放在render方法中，通过state控制显示 */}
        <Dialog 
          title="Dialog With Actions" 
          actions={actions} 
          modal={false} 
          open={this.state.open} 
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
      </div>
    );
  }
}

额外注意点 #

• 一定要确保handleOpen和handleClose方法正确绑定了this（上面代码里用构造函数绑定的方式，你也可以用箭头函数定义方法，比如handleOpen = () => { ... }），否则点击时会出现this为undefined的错误。
• 这种通过状态控制组件显示/隐藏的方式是React的标准做法，所有需要动态显示的元素都应该通过state或props来控制，而不是在事件回调里返回JSX。

内容的提问来源于stack exchange，提问作者KarlR