说明
使用antd 3.X,在父组件在拿到子组件的input框的value值,具体实现如下:
父组件
import React, { useState, useEffect } from "react";
import { Card, Button, Icon, Table, Modal } from "antd";
import UpdateForm from "./updateForm";
function Category() {
// 确认修改OK
const updateCategory = () => {
updateValue.validateFields(async (err, values) => {
if (!err) {
console.log(values);
}
});
};
return (
<div>
<Modal
title="修改信息"
visible={visible === 2}
onOk={updateCategory}
onCancel={handleCancel}
>
<UpdateForm
categoryName={categoryName}
setForm={(form) => {
setUpdateValue(form);
}}
/>
</Modal>
</div>
);
}
export default Category;
子组件
import React, { useEffect } from "react";
import { Form, Input } from "antd";
function UpdateForm(props) {
const { getFieldDecorator } = props.form;
const handleSubmit = () => {};
useEffect(() => {
props.setForm(props.form);
}, []);
return (
<div>
<Form onSubmit={handleSubmit} className="login-form">
<Form.Item>
{getFieldDecorator("categoryName", {
initialValue: props.categoryName, //初始化数据
rules: [{ required: true, message: "分类名称" }],
})(<Input placeholder="请输入名称" />)}
</Form.Item>
</Form>
</div>
);
}
export default Form.create()(UpdateForm);