javascript - React 将焦点放在输入[类型 ="number"] 上，并进行条件渲染

Question

看完React set focus和 React focus with timeout我仍然对在输入上设置 focus 的正确跨浏览器选项是什么感到困惑。

我在条件渲染输入方面遇到问题，在 table 中渲染后可能会获得焦点，其中 input 放置在 td 中。

1)componentDidUpdate解决方案:

//...
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)requestAnimationFrame的解决方案:

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

render() {
  // same above
}

此解决方案适用于 Chrome、IE11、Edge，但在尝试设置 focus 时 Firefox 仍然不显示输入。

3)setTimeout(callback, n)的解决方案:

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

  render() {
   // same above
  }

这种情况适用于 Chrome、IE11、Edge 和(最后)Firefox，但似乎这是最“丑陋”的一种。

附言autoFocus 属性不适用于这种情况，这里我有条件渲染，所以需要在点击后设置焦点。

所以，我的问题是:我们是否找到了解决此问题的正确方法，无需为 Firefox 设置 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;

渲染 <MyInput/>你想在哪里。渲染后它将具有焦点。在 Safari、Chrome、Firefox 上测试。