學習React(24) - 介紹Refs的用法

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

class RefsDemo extends Component {
    constructor(props) {
        super(props)
        // 用到這個方法createRef() 
        this.inputRef = React.createRef()
        // call back ref
        this.cbRef = null
        this.setCbRef = (element) => {
            this.cbRef = element
        }
    }
    
    componentDidMount() {
        if(this.cbDef) {
            this.cbRef.focus()
        }

        // this.inputRef.current.focus()
        // console.log(this.inputRef)
    }

    clickHandler = () => {
        alert(this.inputRef.current.value)
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.inputRef}/>
                <input type="text" ref={this.setCbRef}/>
                <button onClick={this.clickHandler}>Click</button>
            </div>
        )
    }
}

export default RefsDemo

在App.js 文件中

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

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

export default App;

結果如下：

當我在第一個方框裏輸入"world"時，點擊Click按鈕，就會彈出Alert框

如果覺得不錯的話，就用點贊來代替五星好評吧！