React 中的 Refs 與 TypeScript

  2. 貼士文章
  3. TypeScript 貼士
  4. React 中的 Refs 與 TypeScript
Muhammad Ibrahim Alvi 2024年2月15日
React React Refs
  1. React 中的鉤子
  2. 在 React 中使用 Hook useRef 與 TypeScript
  3. 在 React 的 React.createRef() 與 TypeScript 一起使用
React 中的 Refs 與 TypeScript

本教程提供了有關在 React 中使用 Refs 和 TypeScript 的指南。我們還將討論 React Hooks 的用途以及哪些 Hooks 幫助我們獲取元素的 Refs。

首先，讓我們看看 React Hooks 是什麼以及為什麼要使用它們。

React 中的鉤子

Hooks 是在 React 版本 16.8 中引入的。Hooks 允許在不編寫類的情況下使用狀態和其他功能，並且它在類中不起作用。

考慮以下使用 useState() 的示例，允許在功能元件中使用狀態變數。初始狀態被傳遞給函式，它返回一個當前狀態值和另一個函式來更新這個值。

程式碼示例：

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "counter"
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>You clicked {counter} times</p>
      <button onClick={() => setCounter(counter + 1)}>
        Add
      </button>
    </div>
  );
}

上面的程式碼有一個初始狀態變數 counter 和一個函式 setCounter，它在按鈕點選事件上設定它的值。每當單擊按鈕時，counter 值都會增加一。

輸出：

React 中的鉤子

在 React 中使用 Hook useRef 與 TypeScript

Hook useRef 允許在渲染之間保持值。useRef 儲存一個可變值，在更新時不會導致重新渲染。

useRef 允許直接訪問 DOM 元素。這允許你直接在功能元件中建立對 DOM 元素的引用。

下面的程式碼示例中，有一個帶有影象的滑塊，每個滑塊都有一個 radio 按鈕來控制它的運動，我們需要一個引用，因此我們使用名為 useRef 的 React Hook，它建立了在功能中控制的那些 radio 按鈕。

程式碼 - React（應用程式）：

import React from "react";
import "./slider.css";
import Cover from "../src/assets/back.png";
import {useRef} from "react";

const Slider = () => {
  const input1 = useRef();
  const input2 = useRef();
  const input3 = useRef();
  var counter = 1;


  setInterval(function () {
    const myInput = eval("input"+counter).current;
    if(myInput){
      myInput.checked = true;
    }
    counter++;
    if (counter > 3) {
      counter = 1;
    }
  }, 4000);
  return (
      <div className="slider">
        <div className="slides">
          <input type="radio" name="radio-btn" id="radio1" ref={input1}/>
          <input type="radio" name="radio-btn" id="radio2" ref={input2}/>
          <input type="radio" name="radio-btn" id="radio3" ref={input3}/>
          <div className="slide first">
            <img src={Cover} alt="" />
          </div>
          <div className="slide">
            <img src={Cover} alt="" />
          </div>
          <div className="slide">
            <img src={Cover} alt="" />
          </div>
        </div>
        <div className="navigation-manual flex center-1">
          <label htmlFor="radio1" className="manual-btn"></label>
          <label htmlFor="radio2" className="manual-btn"></label>
          <label htmlFor="radio3" className="manual-btn"></label>
        </div>
      </div>
  );
};
export default Slider;

程式碼 - CSS：

.slider{
    position: relative;
    border-radius: 5px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    margin: 30px auto;
  }
.slides{
    width: 500%;
    height: 280px;
    display: flex;
  }
.slides input{
    display: none;
  }
.slide{
    width: 20%;
    transition: 2s;
}
.slide img{
    width: 100%;
    height: 100%;
}
  /*css for manual slide navigation*/
.navigation-manual{
    position: absolute;
    width: 100%;
    bottom: 20px;
    display: flex;
    justify-content: center;
}
.manual-btn{
    border: 2px solid #40D3DC;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}
.manual-btn:not(:last-child){
    margin-right: 40px;
}
.manual-btn:hover{
    background: #40D3DC;
}
#radio1:checked ~ .first{
    margin-left: 0;
}
#radio2:checked ~ .first{
    margin-left: -20%;
}
#radio3:checked ~ .first{
    margin-left: -40%;
}
#radio4:checked ~ .first{
    margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto{
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
  }
.navigation-auto div{
    border: 2px solid #40D3DC;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}
.navigation-auto div:not(:last-child){
    margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
    background: #40D3DC;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
    background: #40D3DC;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
    background: #40D3DC;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
    background: #40D3DC;
}

程式碼 - React（主要）：

import './App.css';
import Slider from './Slider';
function App() {

  return (
    <div className="App">
    <Slider/>
    </div>
  );
}

export default App;

另一個檔案是用於設定滑塊樣式的 .css 檔案。上面的元件在渲染後會是這樣的：

在 React 中使用 Hook useRef 和 TypeScript

在 React 的 React.createRef() 與 TypeScript 一起使用

在獲取輸入欄位引用的類元件中，我們使用了 createRef() 方法，該方法用於訪問元件中的任何 DOM 元素並返回一個可變的 ref 物件。

在以下示例中，單擊按鈕時，該欄位會被聚焦。

程式碼：

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // creates a ref to store the element textInput DOM
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    //Focus the input text using the raw DOM API
    // Note: we access "current" to get the node DOM
    this.textInput.current.focus();
  }

  render() {
    // tell React, we want to associate the <input> ref
    // with `textInput` that was created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

輸出：

在帶有 TypeScript 的 React 中使用 React.createRef()

作者： Muhammad Ibrahim Alvi
Muhammad Ibrahim Alvi avatar Muhammad Ibrahim Alvi avatar

Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.

LinkedIn