web-dev-qa-db-fra.com

comment réagir par programmation

J'essaie d'implémenter un cas d'utilisation très simple, une fonctionnalité d'interface utilisateur, où:

  1. Il y a une étiquette avec du contenu
  2. Si vous cliquez dessus, une entrée de texte le remplace par le contenu de l'étiquette disponible
  3. L'utilisateur peut éditer le contenu
  4. Quand on appuie sur enter, l'entrée se cache et l'étiquette est de retour avec le contenu mis à jour

Je pouvais enfin avoir tout à fait correct (en fait avec un backend MongoBD, un redux, etc.), et la seule chose que je ne pouvais jamais faire (payer une journée complète en googler et lire des messages similaires sur S.O.F.) était la suivante:

Lorsque ma saisie de texte apparaît, je ne peux pas y transférer le focus! D'abord je me suis fatigué de cette façon:

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.Word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.Word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.Word}</h3>
    </div>

mais autoFocus ne fonctionnait pas (je "devine" parce que le formulaire est rendu, mais dans un état masqué, rendant autoFocus inutile). 

Ensuite, j'ai essayé dans mon this.updateWor, beaucoup de suggestions trouvées sur google et sur S.O.F .:

this.refs.updateTheWord.focus();

qui, avec des suggestions similaires, tout ne fonctionnait pas. Aussi, j'ai essayé de tromper React juste pour voir si je pouvais faire quelque chose! J'ai utilisé de vrais DOM:

    const x = document.getElementById(this.props.Word._id);
    x.focus();

et cela n'a pas fonctionné non plus. Une chose que je ne pouvais même pas comprendre dans Word était une suggestion comme celle-ci: ayant la méthode de la référence (je "devine") Je ne l’ai même pas essayé car j’ai des multiples de ces composants et j'ai besoin de l'arbitre pour obtenir plus de valeur, par composant, et je ne pouvais pas imaginer si mon arbitre n'est pas nommé, comment je pourrais obtenir la valeur!

Alors, pourriez-vous s'il vous plaît donner une idée, en m'aidant à comprendre que dans le cas où je n'utilise pas de formulaire (car j'ai besoin d'une seule zone de saisie remplaçant une étiquette), comment définir son focus lorsque la classe CSS (Bootstrap) est en train de perdre » caché 's'il vous plaît?

reactjsinputfocus
14
Adrian Adaine

La façon dont vous avez utilisé les arbitres n’est pas la méthode la plus préférée ou bien ce n’est plus la meilleure pratique. essayez quelque chose comme ça 

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

Mettre à jour
À partir de React 16.3, utilisez l’API React.createRef().

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // 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 <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}
24
TRomesh

Ajoutez simplement autofocus attribut à la variable input. (bien sur dans JSX c'est autoFocus)

<input autoFocus ...
0
Mehdi Dehghani

Utilisez la méthode componentDidUpdate à chaque fois que vous mettez à jour le composant

componentDidUpdate(prevProps, prevState) {
     this.input.focus();
}
0
Faraz Ahmed