我可以使用什么元素包装一个排版组件，以便它不使用按钮就可以接受一个onClick事件侦听器

Question

这是我的密码。

​

<a onClick={handleClickOpen}>
  <Typography paragraph component="span" color="primary" variant="body1">
    {f('changeUnitsToCentimeters')}
  </Typography>
</a>

​

我希望能够在排版组件上使用该事件侦听器，但是来自Material的排版不接受onClick事件侦听器。我不想使用按钮，因为它会搞乱文本的外观。是否有一个元素，我可以包装排版组件，将接受该侦听器？

Answer 1

如果您检查定义排版组件API的页面上的props表下面，您会看到它是这样写的

提供的任何其他支持都将提供给根元素(本机元素)。

所以，例如，如果你有

  <Typography onClick={myFunction} paragraph component="span" color="primary" variant="body1">
    {f('changeUnitsToCentimeters')}
  </Typography>

然后，myFunction将作为span上的单击事件直接应用。

也就是说，你不应该仅仅因为按钮会破坏你的风格而使用它。在非交互式元素(如span )上放置单击监听器是不可访问的，使其可访问也不是那么简单。下面列出了一些需要考虑的事情，它们可能并不是详尽无遗的：

1. 您的span是否存在于选项卡索引中？
2. 辅助技术能把它当成按钮吗？
3. 可以通过enter键和空格键单击它吗？
4. 它是否在适当的情况下自动提交表格？

本机按钮元素自动为您处理所有这些内容，因此，与其使span可访问，更简单的解决方案是使用CSS设计按钮的样式，使其看起来像您想要的那样。

对于Material，您可以将ButtonBase组件作为Typography组件的包装器，因为ButtonBase具有所有这些功能以及更多功能，而不需要常规的Material组件的所有固执己见的样式。或者，您不能为按钮使用组件，而只需使用带有自定义样式的常规<button>。这是CSS关于重写默认按钮样式主题的一篇文章。

Answer 2

向组件提供onClick支持

<a>
  <Typography onClick={handleClickOpen} paragraph component="span" color="primary" variant="body1">
    {f('changeUnitsToCentimeters')}
  </Typography>
</a>