Question

我在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 submit处理程序。我想把重点放在输入字段上。请告诉我在受控组件中执行此操作的更正确方法没有参考：

 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();

我应该保持我的组件是否受到控制＆＃39; ？什么是最佳实践＆＃39;

Answer 1

您可以在输入框中使用此功能将默认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();
   }
 }

试试希望它有效

将焦点设置在受控组件中的表单的输入字段中

1 个答案: