调用form页面
构造函数加入
this.forms = React.createRef()
调用这里是用了Modal展开
<Modal
title={"新增预警池"}
visible={visible}
confirmLoading={saveLoading1}
destroyOnClose={true}
cancelText="返回"
onCancel={this.handleCancel}
onOk={this.saveRecord}
okText="保存"
width={600}
>
<AddMessage ref={this.forms} orggData={orggData} />
</Modal>
设置form值
const _this = this
//visible: true,先渲染出表单页面才能设置值,保守起见使用了延时函数
this.setState({ visible: true},
()=>{
setTimeout(()=>{
_this.forms.current.setFieldsValue({"driveName":value.indName,"driveId":value.indId,"drivePath":value.catalogIdPath});
},10)
})
清空form值
const _this = this
//visible: true,先渲染出表单页面才能设置值,保守起见使用了延时函数
this.setState({ visible: true},
()=>{
setTimeout(()=>{
_this.forms.current.resetFields();
},10)
})
获取form值
this.forms.current.validateFields((err, values) => {
if (!err) {
console.log(values)
}
})
form页面
this.props.form.setFieldsValue设置form值
import React from 'react'
import { Form, Input, Select,DatePicker,Icon,InputNumber,TreeSelect} from 'antd';
import { DModal } from "@/component/hydb"
import DirverIndex from "./indecatorcount/index"
import { itemconfigService} from "@/service"
import moment from "moment"
const { Option } = Select;
const { RangePicker } = DatePicker;
const { MonthPicker } = DatePicker
class AddMessageForm extends React.Component {
constructor(props) {
super(props)
this.state={
visible:false,
saveLoading:false,
orggData:'',
depts:[]
}
}
componentDidMount() {
}
changeshow=(value)=>{
console.log("value:::",value);
this.setState({visible:false}) this.props.form.setFieldsValue({"driveName":value.indName,"driveId":value.indId,"drivePath":value.catalogIdPath})
}
render() {
const { getFieldDecorator} = this.props.form;
const {orggData}= this.props
const { saveLoading,visible,depts} = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 },
},
};
return (
<div>
<Form {...formItemLayout}>
<Form.Item label="短板名称" >
{getFieldDecorator('driveName', {
initialValue:'',
rules: [{ required: true, message: '必填项'}],
})(<Input onClick={this.changeshow}}/>)}
</Form.Item>
<Form.Item label="单位名称">
{getFieldDecorator('compareObj', {
rules: [{required: true, message: '必填项',},]
})(<TreeSelect
dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
treeData={orggData}
treeCheckable={false}
showSearch
treeNodeFilterProp="title"
onChange={this.onChange}
/>)}
</Form.Item>
<Form.Item label={"指标id"} style={{display:'none'}}>
{getFieldDecorator('driveId', {
rules: [{ required: false, message: '必填项'}],
})(<Input />)}
</Form.Item>
<Form.Item label={"指标路径"} style={{display:'none'}}>
{getFieldDecorator('drivePath', {
rules: [{ required: false, message: '必填项'}],
})(<Input />)}
</Form.Item>
</Form>
</div>
);
}
}
const AddMessage = Form.create({ name: 'register' })(AddMessageForm);
export default AddMessage