Question

如何在单击按钮后聚焦文本字段。我尝试使用autoFocus，但无法解决：Example sandbox

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

Answer 1

您需要使用裁判，请参见https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

>>> i = 1

>>> while i in range(0,10):
...     print("Hello world", i)
...     i = i + 1
... 
Hello world 1
Hello world 2
Hello world 3
Hello world 4
Hello world 5
Hello world 6
Hello world 7
Hello world 8
Hello world 9

>>> i
10

已将Material-UI v3.6.1。的引用更新为inputRef。

Answer 2

首先，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)} />

Answer 3

如果您使用的是无状态功能组件，则可以使用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>
  );
};

Answer 4

如果您将 Material-ui <TextField/> 与 react 功能组件一起使用，则可以使用 focus 实现 inputRef。这里的技巧是 if 条件 if(input != null)。你可以简单地做：

<TextField
    variant="filled"
    inputRef={(input) => {
      if(input != null) {
         input.focus();
      }
    }}
/>

这是一个适合您的工作示例。 CodeSandBox- Material-ui-TextFieldFocus

如何将Material UI Textfield集中在按钮单击上？

4 个答案: