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