如何在 Meteor/React 中打开和关闭 Material-UI 对话框？答案

【问题标题】：How do I open and close a Material-UI Dialog in Meteor/React?如何在 Meteor/React 中打开和关闭 Material-UI 对话框？
【发布时间】：2017-01-26 00:55:13
【问题描述】：

我试图在用户单击按钮时弹出一个带有表单的对话框。我几乎完全从Dialog Material-UI 站点获取了如何使用用于打开对话框的按钮和对话框中添加的文本字段来执行此操作。这是使用 Meteor 和 React。当我在服务器上运行时出现错误。有人知道Missing class properties transform. 是什么意思吗？

代码

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

const style = {
  marginRight: "20px",
  position: "absolute",
  left: "80%",
  down: "80%",
};

export default class Events extends React.Component {
  state = {
    open: false,
  };

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

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

  render() {
    const actions = [
          <FlatButton
            label="Cancel"
            primary={true}
            onTouchTap={this.handleClose}
          />,
          <FlatButton
            label="Submit"
            primary={true}
            keyboardFocused={true}
            onTouchTap={this.handleClose}
          />,
        ];

    return (
        <div>
          <h1>Events</h1>
          <FloatingActionButton style={style}>
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            title="Add Event"
            actions={actions}
            model={false}
            open={this.state.open}
            onRequestClose={this.handClose}
          >
            <TextField
              hintText="Hint Text"
              floatingLabelText="Floating Label Text"
            />
          </Dialog>
        </div>
    );
  }
}

错误

Errors prevented startup:

While processing files with ecmascript (for target web.browser):
client/events/Events.jsx:20:2: /client/events/Events.jsx: Missing class properties transform.

Your application has errors. Waiting for file change.

【问题讨论】：

标签： javascript reactjs meteor material-design material-ui

【解决方案1】：

假设您使用的是 babel，您需要 class properties 转换。如果更可取，它包含在stage 2 preset 中。你是用 webpack 打包的吗？分享你的 webpack 配置，尤其是 loaders 中的 js/jsx 部分会很有帮助。

【讨论】：

我认为我的问题是 babel。我已经多次看到这个问题，并且我还查看了他们的文档。我不知道它是什么，也不认为它是必需的，因为在 Material-UI 的对话框部分中没有提到它。我只需要使用 npm install --save babel-cli 的 babel-cli 吗？
在这里分享你的 webpack 配置会很有帮助。您可能已经在使用 babel，但是您必须指定需要哪些插件。你的 package.json 中有 babel 之类的东西，还是有 .babelrc 文件？
然后将.babelrc添加到项目的根目录下？
我的 package.json 中没有 .babelrc 和 babel。
您是如何构建或执行您的 javascript 文件的？

【解决方案2】：

请参阅我的其他答案以使此代码正常工作，但如果您愿意，也可以完全避免使用类语法。

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

const style = {
  marginRight: "20px",
  position: "absolute",
  left: "80%",
  down: "80%",
};


export default const Events = React.createClass({
  getInitialState: function () {
    return {
      open: false
    }
  },
  handleOpen: () => {
    this.setState({open: true});
  },

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

  render: function() {
    const actions = [
          <FlatButton
            label="Cancel"
            primary={true}
            onTouchTap={this.handleClose}
          />,
          <FlatButton
            label="Submit"
            primary={true}
            keyboardFocused={true}
            onTouchTap={this.handleClose}
          />,
        ];

    return (
        <div>
          <h1>Events</h1>
          <FloatingActionButton style={style}>
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            title="Add Event"
            actions={actions}
            model={false}
            open={this.state.open}
            onRequestClose={this.handClose}
          >
            <TextField
              hintText="Hint Text"
              floatingLabelText="Floating Label Text"
            />
          </Dialog>
        </div>
    );
  }
})

【讨论】：