Material UIのDialogで formのsubmitできなくて困ったら読む記事

全てここに書いてある．
https://github.com/mui-org/material-ui/issues/6128

三行まとめ

• Dialogコンポーネントはそれ自身のParentにあたるコンポーネントの下にrenderingされない
• なのでタグの親子関係が form > Dialog > button(submit) となっているとsubmitボタンとformの対応関係がとれなくて想定通りに動かない
• よって Dialog > form > button(submit) となるようにタグを並べなければいけない

link先のサンプルコードを以下に引用する(これ単独では動かないことには注意)

ダメなケース

<form onSubmit={this.handleSubmit}> 
  <Dialog
    title="Dialog With Post Problem"
    actions={actions}
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
  >
    <TextField hintText="Name Surname" fullWidth={true} />
  </Dialog>
</form>

うまくいくケース

<Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
  <DialogTitle>{"Use Google's location service?"}</DialogTitle>
  <form onSubmit={this.handleSubmit}> 
    <DialogContent>
      <TextField hintText="Name Surname" fullWidth={true} />
    </DialogContent>
    <DialogActions>
      <Button onClick={this.handleRequestClose} primary>Disagree</Button>
      <Button onClick={this.handleRequestClose} primary>Agree</Button>
    </DialogActions>
  </form>
</Dialog>

助かった人がいればLIKEしてくれよな！！