在触发tab模糊事件后，将焦点放在新渲染的文本输入上

Question

我有一个带有文本输入的React（15.3.2）组件。

（无论我在哪里说“渲染”，实际上都是渲染或取消隐藏；我已经尝试了两者。）

当输入元素模糊时，我使用文本输入渲染一个新组件。

我想给新的文本输入焦点。

我尝试了componentDidMount，componentWillUpdate，以及componentdiddupdate；我尝试了命名和函数refs；我试过了。

聚焦本身是工作的，例如，一旦它被渲染，如果我点击初始输入，焦点会转移到新输入（这是一个错误，但与聚焦相比，微不足道）。

第一个输入有一个onBlur，它设置用于告知第二个输入渲染与否的状态。

在模糊处理程序中，我尽可能地停止事件。

当我从第一个元素中进行制表时，我已经“超过”了新渲染的元素，例如，我当前的裸体设计中的浏览器选项卡栏–我猜新元素还没有渲染？

class SecondInput extends Component {
  componentDidUpdate = (prevProps, prevState) => {
    if (!this.props.hidden) this._input.focus()
  }

  render = () => 
    <input type="text" hidden={this.props.hidden} ref={(c) => this._input = c}
}

class NewItem extends Component {
  state = { itemEntered: false }

  itemBlurred = (e) => {
    e.preventDefault()
    e.stopPropagation()
    this.setState({ itemEntered: true })
  }

  render = () =>
    <div>
      Item: <input type="text" onBlur={this.itemBlurred} />
      <SecondInput hidden={!this.state.itemEntered} />
    </div>
}

有什么想法或提示吗？我不得不相信这是显而易见的，因为这种情况肯定一直在发生。

我也对任何其他形式的组件层次结构持开放态度，例如，如果我需要一个容器以某种方式包装所有这些东西，那很好。

反应15.3.2

Answer 1

您看到的问题似乎是，当您按tab键时，页面上没有更多可聚焦的元素，因此焦点转到地址栏。由于某些原因，当焦点位于地址栏上时，只需调用this.\u input.focus（）不会像您预期的那样获取焦点。

为了解决这个问题，我添加了一个空div，并根据是否显示第二个输入设置tabIndex属性。

为了让事情更简单，我将输入焦点放在挂载上，而不是使用隐藏属性。这可能在你的情况下工作，也可能不工作，但它似乎更干净，因为如果它是一个受控的输入，它将防止输入在每个键盘上调用焦点。

let Component = React.Component;


class SecondInput extends Component {
  componentDidMount(){
    this.textInput.focus()
  }

  render(){
    return (
      <input type="text" ref={(input) => this.textInput = input} />
    )
  }
}

class NewItem extends Component {
  state = { itemEntered: false }

  itemBlurred = (e) => {
    //e.preventDefault()
    //e.stopPropagation()
    this.setState({ itemEntered: true })
  }

  render = () =>
    <div>
      Item: <input type="text" onBlur={this.itemBlurred} />
      {
        this.state.itemEntered ? [
          <SecondInput/>
        ] : []
       }
       <div tabIndex={this.state.itemEntered ? null :  0}/>
    </div>
}

ReactDOM.render(<NewItem />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>