refs转发

最新推荐文章于 2023-07-05 18:56:28 发布

天下1281

最新推荐文章于 2023-07-05 18:56:28 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： refs转发

本文链接：https://blog.youkuaiyun.com/boysky0015/article/details/98551218

react 专栏收录该内容

45 篇文章

订阅专栏

本文介绍在React中如何利用Refs实现对输入框的自动聚焦功能，通过forwardRef和createRef方法，演示了如何在组件中引用和操作DOM元素。

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

/**
 * Created by mapbar_front on 2019/8/5.
 */
import React,{Component} from 'react';

function handleClick(ref){
    console.log('handleClick',ref.current); //<input type="text"/>
    ref.current.focus()
}
const Test = React.forwardRef((props,ref)=>{
    console.log('ref',ref.current); //null
    return <div>
                <input type="text" ref={ref} />
                <button onClick={()=>handleClick(ref)}>
                    {props.children}
                </button>
            </div>
})

class Ref3 extends Component{
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }
    handleClick(){
        console.log('this.ref');
    }
    render(){
        return(
            <Test ref={this.ref}>
                点我
            </Test>
        )
    }
}
export default Ref3;

/**
 * Created by mapbar_front on 2019/8/6.
 */
import React,{Component} from 'react';


const FancyButton=React.forwardRef((props,ref)=>{
    return <div>
                <input ref={ref} type="text"/>
                <button onClick={props.theme}>
                    {props.children}
                </button>
            </div>
})


class Ref12 extends Component{
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }

    handleClick=()=>{
        console.log('this.ref',this.ref);
        this.ref.current.focus();
    }

    render(){
        return(
            <div>
                <FancyButton ref={this.ref} theme={ this.handleClick }>
                    FancyButton
                </FancyButton>
            </div>
        )
    }
}
export default Ref12;