Skip to content

Instantly share code, notes, and snippets.

@koizuss
Last active August 14, 2016 11:39
Show Gist options
  • Save koizuss/478e38a5cb07a0a8c90a97433c8e0c35 to your computer and use it in GitHub Desktop.
Save koizuss/478e38a5cb07a0a8c90a97433c8e0c35 to your computer and use it in GitHub Desktop.
material-uiでDialog内にTextFieldを置くとフォーカスがおかしくなる問題 ref: http://qiita.com/koizuss@github/items/ddd656cbafd888f179d6
import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
export default class Component extends Component {
constructor(props, context) {
super(props, context);
this.state = {
open: false,
title: '',
};
}
handleOpen() {
this.setState({open: true});
}
handleClose() {
this.setState({open: false});
}
handleChange(e) {
this.setState({
title: e.target.value,
});
}
render() {
return (
<div>
<RaisedButton label="Show Dialog" onTouchTap={this.handleOpen.bind(this)}
<Dialog
title="ダイアログ"
actions={[
<FlatButton
label="キャンセル"
primary={true}
onTouchTap={this.handleClose.bind(this)}
/>,
<FlatButton
label="OK"
primary={true}
keyboardFocused={true}
onTouchTap={this.handleClose.bind(this)}
disabled={!this.state.title || this.state.title.length < 1}
/>,
]}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose.bind(this)}
>
<TextField
value={this.state.title}
floatingLabelText="タイトル"
onChange={this.handleChange.bind(this)}
style={{width: '100%'}}
/>
</Dialog>
</div>
);
}
}
value={this.state.title}
defaultValue={this.state.title || null}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment