[英]How to focus a Material UI Textfield on button click?
How to focus a Textfield after clicking a button.单击按钮后如何聚焦文本字段。 I tried to use autoFocus but it did not work out: Example sandbox我尝试使用 autoFocus,但没有成功:示例沙箱
<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>
You need to use a ref, see https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element您需要使用 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>
);
}
}
Updated ref to inputRef for Material-UI v3.6.1.将 Material-UI v3.6.1 的 ref 更新为 inputRef。
if you are using a stateless functional component then you can use react 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>
);
};
First, onclick
must be correct like onClick
,首先, onclick
必须像onClick
一样正确,
then if you want to use it inline your JSX
code, it can help.那么如果你想在你的JSX
代码中使用它,它会有所帮助。
I tested it with react 16, it works.我用 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)} />
If you are using Material-ui <TextField/>
with react functional Component, you can implement focus
using inputRef
.如果您将 Material-ui <TextField/>
与 react 功能组件一起使用,则可以使用inputRef
实现focus
。 The trick here is the if condition if(input != null)
.这里的技巧是if(input != null)
。 You can simply do:你可以简单地做:
<TextField
variant="filled"
inputRef={(input) => {
if(input != null) {
input.focus();
}
}}
/>
Here is an working example for you.这是一个适合您的工作示例。 CodeSandBox- Material-ui-TextFieldFocus CodeSandBox- Material-ui-TextFieldFocus
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.