react函数组件 更新自动展示和暴露方法给父组件

react函数组件 子组件接收参数变化时form表单自动接收展示

在更新数据时，子函数组件接收如组件传递过来的参数进行解析并展示，初始值通过initialValue属性定义。
initialValue属性特点：表单默认值，只有初始化以及重置时生效
所以我们通过重置来保证initialValue展示的是最新传递的参数

子组件通过useImperativeHandle将自己的方法和变量暴露给父组件使用

useImperativeHandle（ref，（）=> ({form}）)将form表单暴露给父组件，父组件可以通过ref拿到form

子组件：

 const [form] = useForm();
    //接收角色列表
    const roles = props.roles;
    // 若是修改，则有值， 否则为{} 空
    const user = props.user;
    useEffect(()=>{
        // 每次接收的值变化时，重置表单，这是initialValue才起作用   不能使用setState改变
        form.resetFields();
        console.log('useEffect',user);
    },[props.user])
    console.log('主线程',user);
    // 将form表单暴露给父组件，父组件可以通过ref拿到form
    useImperativeHandle(ref,()=>({
        form
    }))
    return (
        <Form form={form}  labelCol={{span:4}} wrapperCol={{span:18}}>{console.log('渲染',user)}
            <Form.Item label='用户名称' name='username' initialValue={user.username}  rules={[{required:true,message:'角色名称密码不能为空'}]}>
                <Input placeholder='请输入用户名称'></Input>
            </Form.Item>
            { user._id ? null : (<Form.Item label='密码' name='password'  rules={[{required:true,message:'密码不能为空'}]}>
                <Input type='password' placeholder='请输入密码'></Input>
            </Form.Item>)}

            <Form.Item label='手机号' name='phone' initialValue={user.phone} rules={[{required:true,message:'手机号码不能为空'}]}>
                <Input  placeholder='请输入手机号'></Input>
            </Form.Item>
            <Form.Item label='邮箱' name='email' initialValue={user.email} rules={[{required:true,message:'邮箱不能为空'}]}>
                <Input  placeholder='请输入邮箱'></Input>
            </Form.Item>
            <Form.Item label='角色' name='role_id' initialValue={user.role_id} rules={[{required:true,message:'角色不能为空'}]}>
                <Select placeholder='请选择角色'>
                    {roles.map((role)=>{
                        return (<Select.Option key={role._id} value={role._id}>{role.name}</Select.Option>)
                    })}
                </Select>
            </Form.Item>
        </Form>
    );

}

export default forwardRef(AddForm);

父组件

// 获得添加用户的form
    const adRef = useRef();
    
<AddForm ref={adRef} roles={roles} user={user}/>