[英]Set focus on input field of the form in controlled component
我在React js上有这个简单的形式
render: function(){
return (
<div>
<form onSubmit={this.hanldeSubmit} >
<input
type='text' placeholder='What do you need to do?' required
onChange={this.handleChange} value={this.state.value}
/>
<button className='button expanded'>Add Todo</button>
</form>
</div>
);
}
这是on提交处理程序。 我想把重点放在输入字段上。 请告诉我在受控组件中执行此操作的更正确方法没有参考:
hanldeSubmit: function(e){
e.preventDefault();
var {value} = this.state;
if(value){
this.props.onAddTodo(value);
this.setState({value: ''});
}
//how to set focus on input field?
},
我发现这个代码与refs:
this.refs.todoText.focus()
提前致谢
更新:
好的,如果我使用refs来设置焦点:
this.refs.yourInputBox.focus();
我应该保持我的组件“受控”吗? 什么是'最佳实践'?
您可以在输入框中使用此选项将默认autoFocus设置为该输入,同时为输入框设置ref值。
<input
type='text' ref="yourInputBox" placeholder='What do you need to do?'
onChange={this.handleChange} value={this.state.value}
autoFocus
/>
在需要的else条件下使用它。
hanldeSubmit: function(e){
e.preventDefault();
var {value} = this.state;
if(value){
this.props.onAddTodo(value);
this.setState({value: ''});
}
else{
this.refs.yourInputBox.focus();
}
}
试试这个希望它有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.