web-dev-qa-db-fra.com

Comment concentrer un champ de texte d'interface utilisateur sur un clic de bouton?

Comment concentrer un champ de texte après avoir cliqué sur un bouton. J'ai essayé d'utiliser la mise au point automatique, mais cela n'a pas fonctionné: Exemple de bac à sable

  <div>
    <button onclick={() => this.setState({ focus: true })}>
      Click to focus Textfield
    </button>
    <br />
    <TextField
      label="My Textfield"
      id="mui-theme-provider-input"
      autoFocus={this.state.focus}
    />
  </div>
reactjsmaterial-ui
7
vuvu

Vous devez utiliser une référence, voir https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

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 <input> ref
    // with the `textInput` that we created in the constructor
    return (
        <div>
          <button onClick={this.focusTextInput}>
            Click to focus Textfield
          </button>
       <br />
       <TextField
         label="My Textfield"
         id="mui-theme-provider-input"
         inputRef={this.textInput} 
       />
     </div>

    );
  }
}

Mise à jour de ref à inputRef pour Material-UI v3.6.1.

11
rooch84

si vous utilisez un composant fonctionnel sans état, vous pouvez utiliser des hooks React.

import React, { useState, useRef } from "react";

let MyFunctional = (props) => {

  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};
2
44kksharma

Tout d'abord, onclick doit être correct comme onClick,
puis si vous souhaitez l'utiliser en ligne avec votre code JSX, cela peut vous aider.
Je l'ai testé avec react 16, ça marche.

 <button onClick={() => this.myTextField.focus()}>
    Click to focus Textfield
 </button>

<TextField
       label="My Textfield"
       id="mui-theme-provider-input"
       inputRef={(el) => (this.myTextField = el)} />
0
RGhanbari