时间戳

首页 > 解决方案 > 在 React 中显示对话框 - 材质 UI

html - 在 React 中显示对话框 - 材质 UI

问题描述

我正在学习 ReactJS。当有人单击该图标时，我想显示对话框。

这是代码：

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 stuff, handleClose, handleOpen etc.)

  showDialoga() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary
        onClick={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary
        keyboardFocused
        onClick={this.handleClose}
      />,
    ];
    return (
      <div>
        <RaisedButton label="Dialog" onClick={this.handleOpen} />
        <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>
    );
  }
  render() {
    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.showDialoga()}
              />}
            >
              <img src={tile.original_image} />
            </GridTile>
          ))}
        </GridList>
      </div>
    );
  }
}

我可以将 () => console.log('I am clicked') 等其他函数传递给 onClick，尽管我无法传递该 showDialoga()。

知道有什么问题吗？

标签： htmlreactjsmaterial-ui

解决方案

我不相信这就是你应该使用对话的方式。

尝试将对话框打开状态设置为真/假，而不是在单击时传递 React 组件的返回。this如果您使用函数来呈现具有事件侦听器的不同组件，也不要忘记绑定到类级别。

推荐阅读