1class AutoFocusTextInput extends React.Component {
2 constructor(props) {
3 super(props);
4 this.textInput = React.createRef(); }
5
6 componentDidMount() {
7 this.textInput.current.focusTextInput(); }
8
9 render() {
10 return (
11 <CustomTextInput ref={this.textInput} /> );
12 }
13}
1function MyFunctionComponent() { return <input />;
2}
3
4class Parent extends React.Component {
5 constructor(props) {
6 super(props);
7 this.textInput = React.createRef(); }
8 render() {
9 // Ça ne fonctionnera pas !
10 return (
11 <MyFunctionComponent ref={this.textInput} /> );
12 }
13}
1class MyComponent extends React.Component {
2 constructor(props) {
3 super(props);
4 this.myRef = React.createRef(); }
5 render() {
6 return <div ref={this.myRef} />; }
7}
1function CustomTextInput(props) {
2 // textInput doit être déclaré ici pour que la ref puisse s’y référer const textInput = useRef(null);
3 function handleClick() {
4 textInput.current.focus(); }
5
6 return (
7 <div>
8 <input
9 type="text"
10 ref={textInput} /> <input
11 type="button"
12 value="Donner le focus au champ texte"
13 onClick={handleClick}
14 />
15 </div>
16 );
17}
1class CustomTextInput extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.textInput = null;
6 this.setTextInputRef = element => { this.textInput = element; };
7 this.focusTextInput = () => { // Donne le focus au champ texte en utilisant l’API DOM native. if (this.textInput) this.textInput.focus(); }; }
8
9 componentDidMount() {
10 // Focus automatique sur le champ au montage
11 this.focusTextInput(); }
12
13 render() {
14 // Utilise la fonction de rappel `ref` pour stocker une référence à l’élément
15 // DOM du champ texte dans une propriété d’instance (ex. this.textInput)
16 return (
17 <div>
18 <input
19 type="text"
20 ref={this.setTextInputRef} />
21 <input
22 type="button"
23 value="Donner le focus au champ texte"
24 onClick={this.focusTextInput} />
25 </div>
26 );
27 }
28}
1function CustomTextInput(props) {
2 return (
3 <div>
4 <input ref={props.inputRef} /> </div>
5 );
6}
7
8class Parent extends React.Component {
9 render() {
10 return (
11 <CustomTextInput
12 inputRef={el => this.inputElement = el} />
13 );
14 }
15}