API Reference
Legacy React APIs

createRef

Pitfall

createRef பெரும்பாலும் class components-க்குப் பயன்படுத்தப்படுகிறது. Function components பொதுவாக அதன் பதிலாக useRef-ஐ நம்புகின்றன.

createRef எந்த value-யையும் கொண்டிருக்கக்கூடிய ref object-ஐ உருவாக்குகிறது.

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

குறிப்பு

createRef()

Class component-க்குள் ref declare செய்ய createRef-ஐ call செய்யுங்கள்.

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

Parameters

createRef parameters எதையும் ஏற்காது.

Returns

createRef ஒரு property கொண்ட object-ஐ return செய்கிறது:

  • current: ஆரம்பத்தில் இது null ஆக set செய்யப்படும். பின்னர் அதை வேறு ஒன்றாக set செய்யலாம். Ref object-ஐ React-க்கு JSX node-ன் ref attribute ஆக pass செய்தால், React அதன் current property-ஐ set செய்யும்.

Caveats

  • createRef எப்போதும் வேறுபட்ட object-ஐ return செய்கிறது. நீங்கள் நேரடியாக { current: null } எழுதுவது போன்றதே இது.
  • Function component-இல், எப்போதும் அதே object-ஐ return செய்யும் useRef-ஐயே நீங்கள் பெரும்பாலும் விரும்புவீர்கள்.
  • const ref = useRef() என்பது const [ref, _] = useState(() => createRef(null)) என்பதற்கு equivalent.

பயன்பாடு

Class component-இல் ref declare செய்தல்

Class component-க்குள் ref declare செய்ய, createRef-ஐ call செய்து அதன் result-ஐ class field-க்கு assign செய்யுங்கள்:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

இப்போது உங்கள் JSX-இல் உள்ள <input>-க்கு ref={this.inputRef} pass செய்தால், React this.inputRef.current-ஐ input DOM node-ஆல் populate செய்யும். உதாரணமாக, input-ஐ focus செய்யும் button-ஐ இவ்வாறு உருவாக்கலாம்:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

Pitfall

createRef பெரும்பாலும் class components-க்குப் பயன்படுத்தப்படுகிறது. Function components பொதுவாக அதன் பதிலாக useRef-ஐ நம்புகின்றன.

மாற்று வழிகள்

createRef பயன்படுத்தும் class-இலிருந்து useRef பயன்படுத்தும் function-க்கு migrate செய்தல்

புதிய code-இல் class components-க்கு பதிலாக function components பயன்படுத்த பரிந்துரைக்கிறோம். createRef பயன்படுத்தும் existing class components உங்களிடம் இருந்தால், அவற்றை இவ்வாறு convert செய்யலாம். இது original code:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

இந்த component-ஐ class-இலிருந்து function-க்கு convert செய்யும்போது, createRef calls-ஐ useRef calls-ஆக மாற்றுங்கள்:

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}
PreviouscreateElement
NextforwardRef