我最近在跨浏览器测试时遇到了 React 的问题。调用 focus() 时会出现此问题在包含 React 自动生成的元素上 <span>标签。
简化的组件
我的组件，a <Button/> ，是正常 <button> 的抽象具有附加功能。这是一个简化版本:
输出:
<Button value="Button"/>
是:
<button><span>Button</span></button>
由于 React 在跨度中自动换行 float 文本节点，因此它可以分配 data-reactid ， <button> 内的文本包裹在<span>中标签。
该按钮有一个 onClick()调用方法event.target.focus()在元素上。
问题
在 Chrome/Firefox 中，单击按钮会将焦点设置在按钮上。在 Safari 中，单击按钮并不总是将焦点设置在按钮上。相反，<body>获得焦点。
经过几个小时的摆弄，我发现只有在 React 自动生成的 <span> 之外单击时，按钮才会获得焦点。标签(下面按钮的蓝色区域)。在 <span> 内单击由 React 创建的标签(下面按钮的黑色区域)将导致 <body>以获得焦点。
同样，这只发生在 Safari 中。
在 Chrome/Firefox 中，单击任一区域都会导致 <button>获得焦点。
这是一个CodePen包含完整的示例，重现步骤:
- 打开the CodePen在 Safari 中。
- 打开控制台。
- 单击黑暗区域内的按钮(对应于
<span>标签)。您会注意到focused元素(使用document.activeElement)很可能是<body>. - 单击蓝色区域内的按钮(对应于
<button>标记。您会注意到focused元素是<button>。
问题
是否有一种首选方法可以使跨浏览器的行为保持一致？或者这与 React 无关，只是 Safari/Chrome/Firefox 处理方式的差异 focus() ？
一种可能的解决方案:设置 pointer-events: none;在内<span>元素。这将允许点击 <span>传播到<button> 。然而，这似乎很黑客。
最佳答案
你可以只使用引用吗？
又名
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>
);
}
关于javascript - Safari/Chrome/Firefox 中的 focus() 与 React 不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36876917/