如何在Meteor/React中打開和關閉Material-UI對話框？

Question

我正在嘗試在用戶單擊按鈕時彈出一個窗體對話框。我幾乎完全從Dialog Material-UI網站獲取了關於如何使用按鈕來完成此操作的按鈕，該按鈕將用於打開對話框中添加的對話框和TextField。這是使用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. 

Answer 1

看到我的其他答案，使這個代碼的工作，但你也可以避免完全使用類語法，如果你願意。

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

Answer 2

假設你正在使用通天，你需要的class properties變換。如果更可取，則包含在stage 2 preset中。你使用webpack捆綁嗎？共享您的webpack配置，尤其是loaders中的js/jsx部分將會有所幫助。