create ref in react js functional component code example
Example 1: react.createref()
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus(); }
render() {
// tell React that we want to associate the ref
// with the `textInput` that we created in the constructor
return (
);
}
}
Example 2: refs react js
class Lesson9Refs extends Component {
onAddProduct = () => {
alert(this.refs.productname.value);
}
return (
Featured
{ elements }
);
}
}
export default Lesson9Refs;
Example 3: createref in functional component
function CustomTextInput(props) {
// textInput must be declared here so the ref can refer to it
const textInput = useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
);
}
Example 4: 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 (
);
}
}