【react——小技巧】Input输入框的回车换行获取焦点

【react——小技巧】Input输入框的回车换行获取焦点_第1张图片

点击第一个输入框回车后,光标定位在第二个输入框中

目录

第一种写法(通过id):

第二种方法(通过ref):

 focus失效无法定位焦点


用的是ant.design 组件,所以有onpressEnter这个属性,

如果没有用到组件,可以通过监听回车事件,替代onpressEnter属性

我用的是  在第一个输入框内Input属性内必须写onpressEnter

【react——小技巧】Input输入框的回车换行获取焦点_第2张图片

第一种写法(通过id):

在第二个输入框内Input增加id属性

【react——小技巧】Input输入框的回车换行获取焦点_第3张图片

【react——小技巧】Input输入框的回车换行获取焦点_第4张图片

第二种方法(通过ref):

【react——小技巧】Input输入框的回车换行获取焦点_第5张图片

【react——小技巧】Input输入框的回车换行获取焦点_第6张图片

 focus失效无法定位焦点

1.先打印,查看DOM,id是否添加正确

【react——小技巧】Input输入框的回车换行获取焦点_第7张图片

 2.如果id正确还是无法切换到一个焦点,就用setTimeout定时器,就可以成功实现

【react——小技巧】Input输入框的回车换行获取焦点_第8张图片

你可能感兴趣的:(reactjs,前端)