How to submit the form by Material UI Dialog using ReactJS

In HTML5 form="" attribute can be used as a reference to any form on a page. So button gets form="my-form-id" attribute and form gets id="my-form-id" attribute.

return (
  <Dialog
    open
    actions={[
      <RaisedButton type="submit" form="my-form-id" label="Submit" />
    ]}
  >
    <form id="my-form-id" onSubmit={handleSubmit(this.onSubmit)}>
      <TextField {...fields.username} floatingLabelText="Username" />
    </form>
  </Dialog>
);

I use Material UI v0.20.

You can put a <form> inside the Dialog, but you must also put your {actions} inside the form, instead of the actions property. Your Submit action button should have type="submit" on it (type="reset" is also supported, and shown below).

jsFiddle: https://jsfiddle.net/14dugwp3/6/

const {
  Dialog,
  TextField,
  FlatButton,
  MuiThemeProvider,
  getMuiTheme,
} = MaterialUI;

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: true };
    this.handleClose = this._handleClose.bind(this);
  }

  _handleClose() {
    this.setState({ open: false });
  }

  render() {
    const actions = [
      <FlatButton
        type="reset"
        label="Reset"
        secondary={true}
        style={{ float: 'left' }}
        />,
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
        />,
      <FlatButton
        type="submit"
        label="Submit"
        primary={true}
        />,
    ];

    return (
      <Dialog
        title="Dialog With Custom Width"
        modal={true}
        open={this.state.open}
        >
        <form action="/" method="POST" onSubmit={(e) => { e.preventDefault(); alert('Submitted form!'); this.handleClose(); } }>
          This dialog spans the entire width of the screen.
          <TextField name="email" hintText="Email" />
          <TextField name="pwd" type="password" hintText="Password" />
          <div style={{ textAlign: 'right', padding: 8, margin: '24px -24px -24px -24px' }}>
            {actions}
          </div>
        </form>
      </Dialog>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme() }>
    <Example />
  </MuiThemeProvider>
);

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