使用条件渲染对输入[type=“number”]进行反应设置焦点

Question

在阅读了React设置焦点和带有超时的React焦点后，我仍然有点困惑，在输入上设置焦点的正确跨浏览器选项是什么。

我有一个问题与条件渲染输入可能有焦点后渲染在表，其中输入放置在td。

1）解决方案与组件didUpdate：

//...
componentDidUpdate() {
  this.input && this.input.focus();
}

render() {
  const show = this.state.isShown;

  return (
    <td className="editable">
      {!show ? (
        <input
          type="number"
          ref={(input) => { this.input = input }}
          value={this.state.value}
          onBlur={this.save}
          onKeyPress={e =>
            e.which === 13 || e.keyCode === 13 ? this.save() : null}
      />
    ) : (
        <span onClick={this.onTdClick}>{this.props.name}</span>
      )}
    </td>
  );
}

此解决方案适用于Chrome、IE11、Edge，但不适用于最新的Firefox（单击span后，输入事件不会出现）。

2）解决方案与请求动画帧：

//...
componentDidUpdate() {
  if (!this.state.isShown) {
    requestAnimationFrame(() => {
      this.input && this.input.focus();
    })
  }
}

render() {
  // same above
}

该解决方案适用于Chrome、IE11、Edge，但当试图设置焦点时，Firefox仍然不显示输入。

3） 设置超时的解决方案（回调，n）：

  //...
  componentDidUpdate() {
    if (!this.state.isShown) {
      setTimeout(() => {
        this.input && this.input.focus()
      }, 50);
    }
  }

  render() {
   // same above
  }

本案例适用于Chrome、IE11、Edge和（最后）Firefox，但似乎这是最“丑陋”的案例。

另外，autoFocusattr不适用于这种情况，这里我有条件渲染，所以需要在单击后设置焦点

所以，我的问题是：我们有没有正确的方法来解决Firefox的w/o设置setTimeout？

现场测试示例：codepen




Answer 1

import React from 'react';

const MyInput = React.createClass({

    componentDidMount(){
        this.elem.focus();
    },

    render(){
        return(
            <input
                ref={(elem) => {this.elem = elem}}
                type="text"
            />
        );
    }
});
export default MyInput;

渲染<代码>