我如何从 material-ui 的对话操作中提交 redux-form 表单？

Question

在我的代码中，我使用了来自 'material-ui/Dialog'

的 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;

既然 Dialog 接受 actions prop，那么如何将动作中的按钮用作提交触发器？

Answer 1

您有三个选择：

使用 ref 引用 <form />，然后在单击对话框按钮时调用引用 submit()
在 <form /> 下定义隐藏按钮并通过 ref

onClick

使用remote submit

我会选择第一种方法，因为它很简单。

Answer 2

您可以使用 HTML5 <button> 属性 "form":

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

HTML Button tag doc on MDN

我如何从 material-ui 的对话操作中提交 redux-form 表单？

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

reactjs

redux

material-ui

redux-form