javascript - How do I open and close a Material-UI Dialog in MeteorReact? - Stack Overflow

admin管理员组

文章数量:1325532

I'm trying to have a dialog with a form pop up when the user clicks a button. I pretty much took exactly from the Dialog Material-UI site for how to do this with a button that will be used to open the Dialog and a TextField added in the Dialog. This is using Meteor and React. When I run on the server I get an error. Anyone know what Missing class properties transform. means?

Code

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>
    );
  }
}

Error

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.

I'm trying to have a dialog with a form pop up when the user clicks a button. I pretty much took exactly from the Dialog Material-UI site for how to do this with a button that will be used to open the Dialog and a TextField added in the Dialog. This is using Meteor and React. When I run on the server I get an error. Anyone know what Missing class properties transform. means?

Code

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>
    );
  }
}

Error

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

Share Improve this question Follow edited Jan 2, 2019 at 15:33 frogatto 29.3k1313 gold badges8989 silver badges134134 bronze badges asked Sep 18, 2016 at 5:32 minnymauerminnymauer 37411 gold badge55 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

See my other answer for making this code work, but you can also avoid using the class syntax entirely if you'd prefer.

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>
    );
  }
})

Assuming you're using babel, you need the class properties transform. It is included in the stage 2 preset if that's more preferable. Are you bundling using webpack? Sharing your webpack config, especially the js/jsx section in loaders would be helpful.

本文标签： javascriptHow do I open and close a MaterialUI Dialog in MeteorReactStack Overflow