使用antd中聚焦inpu框遇到的坑

使用目的：当点击加油盒子时，下面会出现加油金额，鼠标自动聚焦到加油金额input框上

报错：

原因：

原因是在当你未点击加油盒子时visible为false时, 网页上根本不会加载节点, 当然就获取不到inputRef, inputRef.current的结果就为null, 下图第一张图为未点击的visible为false时的DOM树, 第二张图为点击的visible为true时的DOM树:

加油盒子的visible为false时的DOM树

加油盒子的visible为true时的DOM树
既然问题找到了, 那就提一下我目前的解决办法吧!

解决办法

我的解决办法是利用ref的原理, 当input输入框挂载时, 使用ref进行聚焦, 关键代码片段如下:

 ref={(input) => {
                      if (input != null) {
                        input.focus({
                          cursor: 'end',
                        });
                      }
                    }}

谢谢观看 此帖子记录下本菜鸟的成长日记，如果对您遇到此类情况，用此办法解决就可以。