react forwardRef获取子组件属性,方法

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React中,有两种常见的方式来调用组件方法。一种是使用class组件的方式,另一种是使用React Hooks的方式。 首先,使用class组件的方式,你可以通过在父组件中创建一个ref获取组件的实例,并调用组件方法。在父组件中,你需要通过React.createRef()来创建一个ref对象,并将它传递给组件ref属性。然后,在父组件中,你可以通过ref.current来访问组件的实例,从而调用组件方法。举个例,下面是一个使用class组件调用组件方法的示例代码: ``` class ParentComponent extends React.Component { constructor(props) { super(props); this.childRef = React.createRef(); } handleClick = () => { this.childRef.current.childMethod(); } render() { return ( <> <ChildComponent ref={this.childRef} /> <button onClick={this.handleClick}>调用组件方法</button> </> ); } } ``` 在上面的例中,当点击按钮时,通过this.childRef.current.childMethod()来调用组件的childMethod方法。 另一种方式是使用React Hooks来调用组件方法。在这种情况下,你可以使用useRef获取组件的实例,并使用forwardRef来将ref传递给组件。然后,在父组件中,你可以通过ref.current来访问组件的实例,从而调用组件方法。举个例,下面是一个使用React Hooks调用组件方法的示例代码: ``` function ParentComponent() { const childRef = useRef(null); const handleClick = () => { childRef.current.childMethod(); } return ( <> <ChildComponent ref={childRef} /> <button onClick={handleClick}>调用组件方法</button> </> ); } ``` 在上面的例中,当点击按钮时,通过childRef.current.childMethod()来调用组件的childMethod方法。 所以,以上是两种常见的在React中调用组件方法的方式。你可以根据你的需求选择使用class组件的方式还是使用React Hooks的方式来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [react如何调用组件身上的方法](https://blog.csdn.net/qq_44472790/article/details/124994164)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值