import React, { useState,useRef } from 'react'
import C1 from '../components/C1';
import { Button,Modal } from 'antd';
export default function Userlist() {
const [isModalOpen, setIsModalOpen] = useState(false);
const test:any = useRef(null)
const showModal = () => {
const showModal = () => {
(async ()=>{
await setIsModalOpen(true);
test.current.setFieldsValue({
username:'sb'
});
})();
};
};
const handleOk = () => {
test.current.validateFields().then((res:any)=>{
console.log(res)
}).catch((err:any)=>
console.log(err)
)
// setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
return (
<div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<C1 ref={test}></C1>
</Modal>
</div>
)
}
import React, { forwardRef,useState } from 'react'
import { Button, Form, Input,Select } from 'antd';
const { Option } = Select;
const C1 = forwardRef((props, ref:any) => {
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
console.log(ref)
const onGenderChange=(value: string)=>{
console.log(value)
if(value=='male'){
seIsDisabled(true)
}else{
seIsDisabled(false)
}
}
const [isDisabled,seIsDisabled] =useState(true)
return (
<Form ref={ref}
name="basic"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: isDisabled, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
)
})
export default C1