學習React(25) - 介紹refs to DOM elements

這篇博文是講,如何attach refs to DOM elements and also class component in react.

咋們就直接上代碼:

// Input.js 文件
import React, { Component } from 'react'

class Input extends Component {
    constructor(props) {
        super(props)
    
        this.inputRef = React.createRef()
    }
    
    focusInput() {
        this.inputRef.current.focus()
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.inputRef}/>
            </div>
        )
    }
}

export default Input
// FocusInput.js 文件 
// 這個文件是parent 文件
import React, { Component } from 'react'
import Input from './Input'

class FocusInput extends Component {
    constructor(props) {
        super(props)
        this.componentRef = React.createRef()
    }
    
    clickHandler = () => {
        this.componentRef.current.focusInput()
    }

    render() {
        return (
            <div>
                <Input ref={this.componentRef}/>
                <button onClick={this.clickHandler}>Focus Input</button>
            </div>
        )
    }
}

export default FocusInput

在App.js 文件裏

// App.js 文件
import React from 'react';
import './App.css';
import FocusInput from './FocusInput'

function App() {
  return (
    <div className="App">
		 <FocusInput/>
    </div>
  );
}

export default App;

結果如下:
在這裏插入圖片描述
當我點擊Focus Input 按鈕時,上面的方框會有響應。


如果覺得這篇博客不錯,就用點贊來代替五星好評吧!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章