如何将 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 <TextField/>
和 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中处于只读状态时如何使文本字段不可单击