Puedes poner un
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="https://foroayuda.es/" 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') );
En HTML5 form="" El atributo se puede utilizar como referencia a cualquier formulario en una página. Entonces el botón se pone form="my-form-id" atributo y forma obtiene id="my-form-id" atributo.
form=""
form="my-form-id"
id="my-form-id"
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> );
Utilizo Material UI v0.20.