How to submit the form by Material UI Dialog using ReactJS

Question

I used the Material UI Dialog to make a form list. In the official case:

<Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
</Dialog>

the actions is :

   const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

How can I build a form and let Dialog can submit my form data?

------------------------------------------------UPDATE-----------------------------------------------

There is another answer:

Add the attribute of type and form in the Dialog actions button:

const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
        type="submit"        //set the buttom type is submit
        form="myform"        //target the form which you want to sent 
      />,
    ];

and give attribute id to the form in the dialog:

<Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
        // here can put child component and the code still work even the form is in the child component
         <div className="deal_form">
          <form id="myform" onSubmit = {this.handleCreate} >
            <TextField value={this.state.staff_number} />
          </form>
        </div>
</Dialog>

Answer 1

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')
);