材质UI无法弹出ReactJS对话框

时间:2017-04-25 18:44:17

标签: javascript reactjs material-ui

我正在学习材料ui,我正在测试一些对话框的例子。我想要的是一个包含两个文本字段的弹出对话框:登录名和密码,以及两个按钮:提交和取消。

使用下面的代码编辑,但是当单击按钮" DIALOG"时,我无法弹出对话框。有2个错误:

errors before clicking button

DialogSimple.js

import React from 'react';
import Dialog from 'material-ui/Dialog';
import RaiseButton from 'material-ui/RaisedButton';
import TextFieldLogin from './TextFieldLogin';
import injectTapEventPlugin from 'react-tap-event-plugin';

export default class DialogSimple extends React.Component {
  constructor(props) {
    super(props);
    this.state = {open: true};
    injectTapEventPlugin();
  }


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

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

  render() {

    const actions = [
      <div>
      <TextFieldLogin />
      <RaiseButton
        label="Annuler"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <RaiseButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
      </div>
    ];

    return (
      <div>
        <RaiseButton label="Dialog"  onTouchTap={this.handleOpen}/>
        <Dialog
          title="login"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
        login
        </Dialog>
      </div>
    );
  }
}

TextFieldLogin.js

import React from 'react';
import TextField from 'material-ui/TextField';

const TextFieldLogin = () => (
  <div>
    <h3>Veuillez login</h3>
    <TextField
      hintText="Votre login"
      floatingLabelText="Login"
    /><br />
    <TextField
      hintText="Votre mot de passe"
      type="password"
      floatingLabelText="Password"
    /><br />
  </div>
);

export default TextFieldLogin;

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DialogSimple from './DialogSimple'

const App = () => (
    <MuiThemeProvider>
      <div>
        <DialogSimple/>
      </div>
    </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

点击按钮&#34; DIALOG&#34;后,它变黑并产生更多错误:

enter image description here

我尝试了react-tap-event-plugin,但它没有解决问题。

0 个答案:

没有答案