use ref in component reactjs
function MyFunctionComponent() { return <input />;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef(); }
render() {
// Ça ne fonctionnera pas !
return (
<MyFunctionComponent ref={this.textInput} /> );
}
}
4.2
10
class CustomTextInput extends React.Component { // ...
}
Thank you!
10
0
4.56
9
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>
);
}
}
Thank you!
9
0
3.67
6
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return <div ref={this.myRef} />; }
}
Thank you!
6
0
4.43
7
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} /> </div>
);
}
class Parent extends React.Component {
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el} />
);
}
}
Thank you!
7
0
4.25
4
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef(); }
componentDidMount() {
this.textInput.current.focusTextInput(); }
render() {
return (
<CustomTextInput ref={this.textInput} /> );
}
}
Thank you!
4
0
5
1
function CustomTextInput(props) {
// textInput doit être déclaré ici pour que la ref puisse s’y référer const textInput = useRef(null);
function handleClick() {
textInput.current.focus(); }
return (
<div>
<input
type="text"
ref={textInput} /> <input
type="button"
value="Donner le focus au champ texte"
onClick={handleClick}
/>
</div>
);
}
Thank you!
1
0
Are there any code examples left?
New code examples in category Javascript