[英]Setting focus on an MUI Input component when clicking outside its area
I am creating an application with ReactJS and Material UI. 我正在用ReactJS和Material UI创建一个应用程序。 I have an Input component inside a FormControl component.
我在FormControl组件内有一个Input组件。 I would like to set the focus on the Input component when the user clicks in the FormControl (but still outside the Input component).
当用户单击FormControl(但仍在Input组件之外)时,我想将焦点放在Input组件上。 How can this be achieved?
如何做到这一点?
I have tried with refs but I was not able to do it: 我已经尝试过裁判,但我无法做到这一点:
<FormControl
onClick={this.textInput.focus()}
style={{ display: 'block', cursor: 'text' }}
>
<Input
error={this.props.error}
disabled={this.props.disabled}
ref={(input) => { this.textInput = input; }}
/>
</FormControl>
I'm not very familiar with material-ui
, but I think there are two problems here. 我对
material-ui
不太熟悉,但是我认为这里有两个问题。 Firstly, your value for onClick
is not a function, so this will call focus
when the component gets instantiated, on a ref that is not defined yet. 首先,您对
onClick
值不是一个函数,因此在实例化该组件时,它将在尚未定义的ref上调用focus
。 You can fix this by wrapping the call: () => this.textInput.focus()
(or create a method/instance property for it.) 您可以通过包装以下调用来解决此问题:
() => this.textInput.focus()
(或为其创建方法/实例属性。)
Secondly, material-ui
wraps the Input
component in a withStyles
higher-order component, and when you use ref
, it refers to the wrapped component, which doesn't have a focus
method. 其次,
material-ui
将Input
组件包装在withStyles
高阶组件中,当您使用ref
,它引用包装的组件,该组件没有focus
方法。 Instead, you can use the inputRef
prop, which creates a ref to the actual input
DOM element. 相反,您可以使用
inputRef
,该inputRef
创建对实际input
DOM元素的引用。 (see https://material-ui-next.com/customization/api/#internal-components ) (请参阅https://material-ui-next.com/customization/api/#internal-components )
This code should work: 此代码应工作:
..
<FormControl
onClick={() => this.textInput.focus()}
style={{ display: 'block', cursor: 'text' }}
>
<Input
error={this.props.error}
disabled={this.props.disabled}
inputRef={(input) => { this.textInput = input; }}
/>
</FormControl>
..
The problem might be with context and the way the click event is handled in the FormControl
element. 问题可能出在上下文以及
FormControl
元素中处理click事件的方式。
Try this instead: 尝试以下方法:
constructor(props) {
super(props);
this.setFocus = this.setFocus.bind(this);
}
setFocus() {
this.textInput.focus();
}
render() {
return(
<FormControl
onClick={this.setFocus}
style={{ display: 'block', cursor: 'text' }}
>
<Input
error={this.props.error}
disabled={this.props.disabled}
ref={(input) => { this.textInput = input; }}
/>
</FormControl>
);
}
As an annotation, is valid to remember that if you are using some sort of animation, it's possible that your input has'nt been created yet at the mounting of the main component. 作为注释,请记住,如果您使用某种动画,则可能是在安装主要组件时尚未创建输入。 In this case, a
setTimeout
with a timer bigger than the animation time can help. 在这种情况下,
setTimeout
的计时器要比动画时间长。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.