CODEWITHSUNDEEP
reactjsreduxmaterial-uiredux-form
essam tarik
essam tarik

Reputation: 25

how can i submit a redux-form form from material-ui's dialog actions?

in my code im using a Dialog component from 'material-ui/Dialog'

import React, {Component} from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import {reduxForm, Field} from 'redux-form';

class NewTaskDialog extends Component{
    render(){
        return (
            <Dialog
                title="New Task"
                modal={false}
                actions={[<FlatButton type="submit" label="Ok" primary={true} onTouchTap={this.props.onRequestClose} />]}
                open={this.props.open}
                onRequestClose={this.props.onRequestClose}
            >
            <form onSubmit={this.props.handleSubmit}>
                <Field component="input" name="name" />
            </form>
            </Dialog>
        );
    }
}

NewTaskDialog = reduxForm({
    form: 'NewTaskForm'
})(NewTaskDialog);

export default NewTaskDialog;

so since the Dialog accepts actions prop, how can the button inside of actions be used as a submit trigger ?

Upvotes: 2

Views: 3099

Answers (2)

Pavel
Pavel

Reputation: 116

You can use HTML5 <button> attribute "form":

<form id="my-id">
  <input />
</form>
<button type="submit" form="my-id">Submit</button>

HTML Button tag doc on MDN

Upvotes: 2

Lyubomir
Lyubomir

Reputation: 20037

You have three options:

  • Use ref to reference the <form /> and then call submit() on the reference whenever the dialog button is clicked
  • Define hidden button under <form /> and manually trigger onClick there via ref
  • Use remote submit

I'd go with the first approach because of its simplicity.

Upvotes: 1

Related Questions