我正在学习材料ui,我正在测试一些对话框的例子。我想要的是一个包含两个文本字段的弹出对话框:登录名和密码,以及两个按钮:提交和取消。
使用下面的代码编辑,但是当单击按钮" DIALOG"时,我无法弹出对话框。有2个错误:
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;后,它变黑并产生更多错误:
我尝试了react-tap-event-plugin,但它没有解决问题。