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里面实用,也就是只能跟父组件放一起才可以。
00
相似问题