如何将 Material UI 文本字段集中在按钮单击上?

Posted

技术标签:

【中文标题】如何将 Material UI 文本字段集中在按钮单击上?【英文标题】:How to focus a Material UI Textfield on button click? 【发布时间】:2019-02-12 20:00:47 【问题描述】:

单击按钮后如何聚焦文本字段。我尝试使用自动对焦,但没有成功: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>

【问题讨论】:

autoFocus 用于它首次出现的时间。您可以给它一个参考并使用.focus()。你可以通过它的id 直接访问它,尽管在 React 中更喜欢使用 ref 【参考方案1】:

你需要使用 ref,见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>

    );
  

将 Material-UI v3.6.1 的 ref 更新为 inputRef。

【讨论】:

我在@material-ui 1.12.3 上,需要在TextField 道具中使用inputRef 而不是ref 这不会将边框宽度设置为文本字段的焦点宽度。当您专注于输入时,边框宽度从 1px 增加到 2px,但是执行此方法会导致边框宽度保持在 1px。【参考方案2】:

如果您使用的是无状态功能组件,那么您可以使用 react hooks。

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

【讨论】:

【参考方案3】:

首先,onclick 必须正确,如 onClick, 那么如果你想在你的JSX 代码中使用它,它可以提供帮助。 我用 react 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) />

【讨论】:

【参考方案4】:

如果你使用 Material-ui &lt;TextField/&gt; 和 react 功能组件,你可以使用 inputRef 来实现 focus。这里的诀窍是 if 条件if(input != null)。你可以这样做:

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

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

【讨论】:

以上是关于如何将 Material UI 文本字段集中在按钮单击上?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据文本字段 Material UI 中设置的值将对象设置为状态

如何设置material-ui文本字段的样式

在Material-UI中处于只读状态时如何使文本字段不可单击

如何从 Material UI 文本字段中查看密码?

单击按钮时如何使用 useRef 挂钩关注 Material UI TextField?

创建带有文本字段的 Material Ui 复选框