[英]Set focus on input - React Component
I have a react component which has a input field with disable attribute. 我有一个React组件,它的输入字段带有disable属性。 On click of the component, the input gets enabled and user can type on the field.
单击该组件后,将启用输入,并且用户可以在字段上键入。 I'm able to achieve till there, but I need to focus on input field on getting enabled.
我可以达到目标,但是我需要专注于启用输入字段。
Attributes.js Attributes.js
basicAmenitiesList.map(function(item, index){
return <Attribute key={index}
name={item.amenity_id}
type={item.title}
icon={item.icon}
selected={item.isSelected}
value={item.value}
onClick={_this.handleClick.bind(this)}
onChange={_this.handleChange.bind(this)}/>
})
The Attribute file : 属性文件:
<div onClick={this.handleClick.bind(this)}>
...
<input type="text" name={this.props.name}
ref={this.props.name}
placeholder="NO INFO FOUND"
value={this.props.value}
disabled={!this.props.selected}
onChange={this.props.onChange}
/>
</div>
handleClick(e) {
// I need to focus on enabling., that is when **this.props.selected** is true.
return this.props.onClick(this.props.name);
}
UPDATE UPDATE
I tried onFocus for input, 我尝试了onFocus进行输入,
onFocus(){
this.refs.pets.focus();
}
Right now I'm hard coding the refs name as pets , but is there any way to make it dynamic by sending the name with the onFocus? 现在,我很难将refs名称编码为pets ,但是有什么方法可以通过使用onFocus发送名称来使其动态化?
you can use autoFocus as property for input 您可以将autoFocus用作输入的属性
<input type="text" name={this.props.name}
ref={this.props.name}
placeholder="NO INFO FOUND"
value={this.props.value}
disabled={!this.props.selected}
onChange={this.props.onChange}
autoFocus
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.