Question

我最近在跨浏览器测试时在React中遇到了一个问题。在包含React的自动生成的focus()标记的元素上调用<span>时会出现此问题。

简化组件

我的组件<Button/>是具有其他功能的普通<button>的抽象。这是一个简化版本：

输出：

<Button value="Button"/>

是：

<button><span>Button</span></button>

由于React在一个范围内自动包装浮动文本节点，因此它可以分配data-reactid，<button>中的文本将包含在<span>标记中。

该按钮具有onClick()方法，可以在元素上调用event.target.focus()。

问题

在Chrome / Firefox中，点击按钮会将焦点设置在按钮上。在Safari中，单击按钮并不总是将焦点设置在按钮上。而是<body>获得焦点。

经过几个小时的摆弄后，我发现按钮只有在React的自动生成的<span>标签（下方按钮的蓝色区域）外点击时才会获得焦点。点击React创建的<span>标记（下方按钮的黑色区域）将使<body>获得焦点。

同样，这只发生在Safari中。

在Chrome / Firefox中，点击其中一个区域会导致<button>获得焦点。

这里有一个CodePen，其中包含完整的示例，以及重现的步骤：

在Safari中打开the CodePen。
打开你的控制台。
单击黑暗区域内的按钮（对应于<span>标签）。您会注意到focused元素（使用document.activeElement）很可能是<body>。
点击蓝色区域内的按钮（对应<button>标记。您会注意到focused元素是<button>。

问题

是否有一种首选方法可以使浏览器的行为保持一致？或者这与React无关，只是Safari / Chrome / Firefox处理focus()的方式不同？

一种可能的解决方案：在内部pointer-events: none;元素上设置<span>。这样，<span>上的点击就会传播到<button>。然而，这似乎是hackish。

Answer 1

你能使用参考吗？

又名

something(event){
    this.refs.button.focus()
}
render(){
    // stuff
    return (
        <button ref="button" onClick={this.something}>
            {some text here that will make a span element around it}
        </button>
    );
}

sample fiddle

在Safari / Chrome / Firefox中使用React进行焦点不一致（）

1 个答案: