antd 4 下如何在class component下让主对象获取子对象的ref

来源:8-3 开通城市实现

慕圣2813975

2020-04-03

新版本下 如果使用这种component调用方法 如何将子对象的ref实例传递到父对象内?
因为如果要使用Model组件开发,新版本下就不能使用onFinish方法来获取from内容,而要用Model下的onOK,此时视频内的wrapperRef已经失效
我用的是新方法下的createRef,如何让父组件使用子组件创建的实例呢

import React from 'react';
import { Card, Button, Table, Form, Select, Modal, message } from 'antd';
import axios from './../../axios/index';
import Uitls from './../../util/utils';
import utils from './../../util/utils';
const FormItem = Form.Item;
const { Option } = Select;

export default class City extends React.Component {

    state = {
        list: [],
        isShowOpenCity: false
    }

    params = {
        page: 1
    }

    componentDidMount() {
        this.requestList();
    }

    requestList = () => {
        let _this = this;
        axios.ajax({
            url: '/open_city',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then((res) => {
            this.setState({
                list: res.result.item_list.map((item, index) => {
                    item.key = index;
                    return item;
                }),
                pagination: utils.pagination(res, (current) => {
                    _this.params.page = current;
                    _this.requestList();
                })
            })
        })
    }

    //开通城市
    handleOpenCity = () => {
        this.setState({
            isShowOpenCity: true
        })
    }

    handleSubmit = () => {
        console.log()
    }

    render() {
        const columns = [
            {
                title: '城市ID',
                dataIndex: 'id'
            },
            {
                title: '城市名称',
                dataIndex: 'name'
            },
            {
                title: '用车模式',
                dataIndex: 'mode'
            },
            {
                title: '营运模式',
                dataIndex: 'op_mode'
            },
            {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            },
            {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr) {
                    return arr.map((item) => {
                        return item.user_name
                    }).join(',');
                }
            },
            {
                title: '城市开通时间',
                dataIndex: 'open_time'
            },
            {
                title: '操作时间',
                dataIndex: 'update_time'
            }, {
                title: '操作人',
                dataIndex: 'sts_user_name'
            }
        ]

        return (
            <div style={{ width: '100%' }}>
                <Card>
                    <FilterForm />
                </Card>
                <Card>
                    <Button type='primary' onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <Table
                    columns={columns}
                    dataSource={this.state.list}
                    pagination={this.state.pagination}
                />
                <Modal
                    title='开通城市'
                    visible={this.state.isShowOpenCity}
                    onCancel={() => {
                        this.setState({
                            isShowOpenCity: false
                        })
                    }}
                    onOk={this.handleSubmit}
                >
                    <OpenCityForm ref={this.formRef}/>
                </Modal>
            </div>
        )
    }
}

class OpenCityForm extends React.Component {

    formRef = React.createRef()

    onFinish = (value) => {
        message.success(value)
    }

    onFinishFailed = (value) => {
        message.warning(value)
    }

    onCityChange = (value) => {
        this.formRef.current.setFieldsValue(value)
        let data = this.formRef.current.getFieldsValue(['city','mode'])
    }

    render() {

        const formItemLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 10
            }
        }

        return (
            <Form
                layout='horizontal'
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
                initialValues={
                    {
                        ['city']: ''
                    }
                }
                ref={this.formRef}
            >

                <FormItem
                    label='选择城市'
                    name='city'
                    {...formItemLayout}
                >
                    <Select
                        onChange={this.onCityChange}
                    >
                        <Option value=''>全部</Option>
                        <Option value='1'>北京市</Option>
                        <Option value='2'>天津市</Option>
                    </Select>
                </FormItem>
                <FormItem label='营运模式'
                    {...formItemLayout}
                    name='mode'
                >
                    <Select
                        onChange={this.onCityChange}
                    >
                        <Option value='1'>自营</Option>
                        <Option value='2'>加盟</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label='指定地点'
                    {...formItemLayout}
                    name='address'
                >
                    <Select>
                        <Option value='1'>指定停车点</Option>
                        <Option value='2'>禁停区</Option>
                    </Select>
                </FormItem>
            </Form>
        )
    }
}


class FilterForm extends React.Component {

    onFinish = (value) => {
        console.log(value)
    }

    onFinishFailed = (value) => {
        console.log('errorInfo' + value)
    }

    render() {
        return (
            <Form
                layout='inline'
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}>
                <FormItem
                    label='城市'
                    name='city'
                    rules={[
                        {
                            required: true,
                            message: '必须选择城市'
                        }
                    ]}
                >
                    <Select
                        placeholder='请选择'
                    >
                        <Option value=''>全部</Option>
                        <Option value='1'>北京市</Option>
                        <Option value='2'>深圳</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label='用车模式'
                    name='mode'
                    rules={[
                        {
                            required: true,
                            message: '请选择模式'
                        }
                    ]}
                >
                    <Select
                        placeholder='全部'
                    >
                        <Option value=''>全部</Option>
                        <Option value='1'>指定停车点模式</Option>
                        <Option value='2'>禁停模式</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label='营运模式'
                    name='op_mode'
                    rules={[
                        {
                            required: true,
                            message: '请选择模式'
                        }
                    ]}
                >
                    <Select
                        placeholder='全部'
                    >
                        <Option value=''>全部</Option>
                        <Option value='1'>自营</Option>
                        <Option value='2'>加盟</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label='加盟商授权状态'
                    name='auth_status'
                    rules={[
                        {
                            required: true,
                            message: '请选择模式'
                        }
                    ]}
                >
                    <Select
                        placeholder='全部'
                    >
                        <Option value=''>全部</Option>
                        <Option value='1'>已授权</Option>
                        <Option value='2'>未授权</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type='primary' style={{ margin: '0 20px' }}>查询</Button>
                    <Button >重置</Button>
                </FormItem>
            </Form>
        )
    }
}
写回答

1回答

河畔一角

2020-04-04

请参考这篇文章,http://coding.imooc.com/learn/questiondetail/174230.html

目前form不能单独拉出去,必须放在Modal里面实用,也就是只能跟父组件放一起才可以。

0
0

React全家桶+AntD共享单车后台管理系统开发

React全家桶+AntD框架+大量前沿技术

1142 学习 · 495 问题

查看课程