我有一个react组件,它有一个带disable属性的输入字段。单击该组件后,输入将启用,用户可以在该字段上键入。我能够实现到那里,但我需要关注输入字段才能启用。
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)}/>
})
属性文件:
<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);
}
更新
我尝试使用onFocus进行输入,
onFocus(){
this.refs.pets.focus();
}
现在我很难将refs名称编码为 pets ,但有没有办法通过使用onFocus发送名称来使其动态化?
答案 0 :(得分:0)
您可以使用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
/>