react forwardRef获取子组件属性，方法_forwardref setfieldsvalue-优快云博客

本文介绍了一个使用React和Ant Design实现的模态框组件案例，该模态框包含了一个表单，通过Ref进行表单验证。文章展示了如何在用户点击按钮时打开模态框，并在模态框中使用自定义组件进行表单输入，同时实现了性别选择对密码输入框禁用状态的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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