Как сфокусировать текстовое поле пользовательского интерфейса материала при нажатии кнопки? - PullRequest
Новая
       7

Как сфокусировать текстовое поле пользовательского интерфейса материала при нажатии кнопки?

0 голосов
/ 07 сентября 2018

Как сфокусировать текстовое поле после нажатия кнопки. Я пытался использовать автофокус, но это не сработало: Пример песочницы 

  <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>

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Во-первых, onclick должно быть правильным, как onClick,
тогда, если вы хотите использовать его в своем коде JSX, это может помочь.
Я проверил его с реакцией 16, он работает. 

 <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 голосов
/ 10 июня 2019

если вы используете функциональный компонент без сохранения состояния, вы можете использовать реакционные хуки. 

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>
  );
};
0 голосов
/ 07 сентября 2018

Вам нужно использовать ссылку, см. 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>

    );
  }
}

Обновлена ​​ссылка на inputRef для Material-UI v3.6.1.

...