modal中的input输入框自动获取焦点的问题

在开发项目的过程中，有个需求是这样的，点击按钮，弹出一个modal框，要求modal框里的input自动获取焦点。

input输入框单纯的自动获取焦点是很简单的，只需要一个属性autofocus="autofocus"就够了。然而，这个属性触发的时机是页面刚加载的时候，需求是每次弹出modal都需要自动获取焦点。

此时又想到了另一种方法--给input设置ref属性。具体方法是这个样子的 ：给input添加属性ref={refs => this.input = refs}，，然后写个方法  this.input.focus();这样写会发现，第一次点击按钮弹出模态弹框的时候并没有自动获取焦点，关闭弹窗再次点击按钮却能自动获取到，为什么会出现这样的问题呢？原来是当页面加载的时候model并没有被加载，因为弹框时机是点击按钮之后，按钮不点击，就无法获取到modal的信息，所以里面的input也就无法获取到。

既然原因找到了，就想办法解决吧。页面加载的时候modal不触发，那我可以给modal外层加个标签，使它在页面上加载出来，只需要让modal先隐藏起来就好了。这样页面加载的时候是可以加载到modal的。试了一下，效果确实能做到，但把这个bug解决了却又来了个新bug。因为页面加载的时候实际已经把modal加载出来，只不过手动让它隐藏，所以，在没点按钮之前页面不能滚动！这确实是个bug，页面不滚动影响我翻页啊。

再换个方法。此时我除了第一次获取不到焦点之外，只要不刷新页面我以后的几次都能自动获取焦点。所以，我需要实现的就是在第一次点击按钮的时候也能获取到焦点。

那就简单了，我可以使用autofocus="autofocus"用于第一次加载页面的时候获取到焦点，再用this.input.focus()来第n次获取焦点。试了一下，很完美。具体代码贴上来