/Javascript/React/Use ref in component reactjs

Use ref in component reactjs

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;
    this.setTextInputRef = element => {      this.textInput = element;    };
    this.focusTextInput = () => {      // Donne le focus au champ texte en utilisant l’API DOM native.      if (this.textInput) this.textInput.focus();    };  }

  componentDidMount() {
    // Focus automatique sur le champ au montage
    this.focusTextInput();  }

  render() {
    // Utilise la fonction de rappel `ref` pour stocker une référence à l’élément
    // DOM du champ texte dans une propriété d’instance (ex. this.textInput)
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}        />
        <input
          type="button"
          value="Donner le focus au champ texte"
          onClick={this.focusTextInput}        />
      </div>
    );
  }
}

-1

Source: fr.reactjs.org

Use ref in component reactjs

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

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}

-2

Source: fr.reactjs.org

Use ref in component reactjs

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}      />
    );
  }
}

-2

Source: fr.reactjs.org

Similar codes

0 vote288 views1 answer
Open close children modal react
Javascript React
-1 vote260 views1 answer
How to retrieve filename from a blob response in react js
Javascript React
25 votes291 views2 answers
You are running `create-react-app` 4.0.3, which is behind the latest release (5. 0.0).
Javascript React
0 vote288 views1 answer
Return <Text> using if condition react native
Javascript React
0 vote305 views1 answer
Testing a function in jest on click react
Javascript React
0 vote291 views1 answer
React Rendering Movies
Javascript React
3 votes270 views3 answers
React Components
Javascript React
18 votes265 views6 answers
React native create apk
Javascript React
0 vote301 views1 answer
. What is the use of the return function in the React Native Framework?
Javascript React
1 vote334 views1 answer
Java.lang.outofmemoryerror (no error message) react native
Javascript React