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.
Share
Improve this question
edited Jan 2, 2019 at 15:33
frogatto
29.3k13 gold badges89 silver badges134 bronze badges
asked Sep 18, 2016 at 5:32
minnymauerminnymauer
3741 gold badge5 silver badges17 bronze badges
2 Answers
Reset to default 3See 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
版权声明:本文标题:javascript - How do I open and close a Material-UI Dialog in MeteorReact? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742194843a2430886.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论