Meteor/ReactでMaterial-UI Dialogを開いたり閉じたりするにはどうすればいいですか？

Question

私は、ユーザーがボタンをクリックしたときにフォームのポップアップダイアログを表示しようとしています。ダイアログを開くために使用されるボタンとダイアログボックスに追加されたTextFieldを使用してこれを行う方法については、かなり正確にDialog Material-UIサイトから取得しました。これは流星と反応を使用しています。私はサーバー上で実行するとエラーが発生します。誰でも何を意味するのですか？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を使ってバンドルしていますか？ウェブパックの設定、特にjs/jsxのセクションをloadersに共有すると便利です。