antd modal的OK能否触发内部form的submit？

问题描述

问 题

我看了官方示例，Modal的Ok按钮和form的Submit都是执行一个方法。
我现在想把Modal和Form分开，这样modal部分可以直接指定button和form就行了，不需要写一堆显示，隐藏之类的代码。 但是不知道modal的ok按钮如何触发form的提交？
form的提交往往也是父组件给定的方法，所以一般都有参数，例如 onSubmit(error,values)，但是这个方法没法给Ok用，Ok没法提供这两个参数，所以想让Ok触发form的提交，然后只负责隐藏modal。

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

两种解决办法
1、写一个通用的Modal，Form的Submit、Items通过props传递给该Modal
2、给form一个ref，modal的onOK调用 this.refs.form 即可获取form的所有value

当然，这两者并不冲突，可以合在一起，通用的modal + 通用的form

通用的form

import React, { Component, PropTypes } from 'react'
import { Form } from 'antd'

class SharedForm extends Component {
    handleSubmit = () => {
        this.props.form.validateFields((err, values) => {
            console.log(values);
            this.props.onSubmit(err, values);
        });
    }

    render() {
        const children = this.props.children || [];
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const { getFieldDecorator } = this.props.form;

        return (
            <Form layout="horizontal" onSubmit={this.handleSubmit}>
                {children.map((item, key) =>
                    item.title ? <Form.Item key={key} label={item.title} {...(item.layout ? item.layout : formItemLayout) }>
                        {getFieldDecorator(item.name, { initialValue: item.defaultValue })(item.render)}
                    </Form.Item>
                        : <span key={key}>{getFieldDecorator(item.name, { initialValue: item.defaultValue })(item.render)}</span>
                )}
            </Form>
        )
    }
}
SharedForm.propTypes = {
    children: PropTypes.array.isRequired,
    onSubmit: PropTypes.func.isRequired,
}
export default Form.create()(SharedForm);

通用的modal

import React, { Component } from 'react'
import { Modal } from 'antd'
import Form from './_form'

class SharedFormModal extends Component {
    state = { visible: false, }
    showModelHandler = (e) => {
        if (e) e.stopPropagation()
        this.setState({ visible: true, })
    }
    hideModelHandler = () => {
        this.setState({ visible: false, })
    }
    handleSubmit = (err, values) => {
        this.refs.form.validateFields((err, values) => {
            this.props.onSubmit(err, values)
            if (!err) {
                this.hideModelHandler()
            }
        });
    }
    render() {
        const { children, trigger } = this.props
        return (
            <span>
                <span onClick={this.showModelHandler}>
                    {trigger}
                </span>
                <Modal title={this.props.name || ''}
                    visible={this.state.visible}
                    onOk={this.handleSubmit}
                    onCancel={this.hideModelHandler}
                >
                    <Form
                        ref="form"
                        onSubmit={this.handleSubmit}
                        children={children}
                    />
                </Modal>
            </span>
        )
    }
}
SharedFormModal.propTypes = {
    trigger: React.PropTypes.element.isRequired,
    children: React.PropTypes.array.isRequired,
    onSubmit: React.PropTypes.func.isRequired
}
export default SharedFormModal

这篇关于antd modal的OK能否触发内部form的submit？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！