SVG外部的按钮不可单击

Question

我在一个按钮内有一个带有一些javascript的动画SVG，两者都必须是可点击的BCS。我需要处理的动画和按钮本身的状态。

有人能帮我吗

在这里你可以看到codesandbox中的完整代码https://codesandbox.io/s/vigilant-field-uyvvcr?file=/src/App.js

const [activeFilter, setActiveFilter] = useState(false)
const mouseEnter = () => {
if (!activeFilter) {
setActiveFilter(true)
} else {
setActiveFilter(false)
}
console.log(document.querySelector('object'))
}
return(
<div className='search__container'>
<div className='search'>
<input placeholder='Search' type='text' />
<button onClick={mouseEnter} className={`${activeFilter? 'active ' : ''}filterButton`}>
<object type="image/svg+xml" data={FilterIcon} />
</button>
</div>
</div>
)
}

Answer 1

为什么会发生这种情况

htmlobject元素创建了一个新的浏览上下文(如果您使用开发工具进行检查，您可以看到：注意object下的嵌入式#document(。svg中捕获的点击事件激发并弹出了这个上下文，但永远不会超出它。因此，它永远不会到达按钮元素。

如何解决

您不希望有两个浏览上下文。为了做到这一点，您可以简单地去掉object，并插入svg作为按钮的直接子项。

对于您使用react的特定情况

你可以使用svg作为反应组件：

<button onClick={mouseEnter} className={`${activeFilter? 'active ' : ''}filterButton`}>
<FilterIcon />
</button>

您可能需要调查SVGR。

希望您使用的是create-react-app，它应该是免费的。