为什么 TableRow 在 Grommet 中不能悬停？

Question

我正在使用索环来开发应用程序。库中的许多组件都有一个 onClick 属性，当您向组件的 onClick 属性提供回调函数时，它就可以悬停了。但这似乎不会发生在 TableRow 组件上。 Fiddle here。用一些 css 来解决这个问题应该不会太难，但我想知道我是否遗漏了一些设计概念（即 TableRows 特别是不可悬停的原因）或者是否有更多索环风格，使 TableRows 可悬停。

代码：

index.html:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

index.js:

var Box = Grommet.Box;
var Table = Grommet.Table;
var TableRow = Grommet.TableRow;
var TableHeader = Grommet.TableHeader;

const NotHoverable = () => {

let data = [{"name": "John", "title": "Developer", "city": "Dublin"},
            {"name": "Paul", "title": "Architect", "city": "Bristol"},
            {"name": "Mary", "title": "CTO", "city": "Berlin"},
            {"name": "Frank", "title": "Ops", "city": "New York"},
            {"name": "Jane", "title": "HR", "city": "Tokyo"}]

  return (
    <Box pad='small'>
      <Table>
        <TableHeader labels={["name", "title", "city"]} />
        <tbody>
          {data.map( (component, index) => 
            <TableRow onClick={() => console.log('Row Clicked!')} style={{"borderBottom": "1px solid"}} >
              <td>
                {component.name}
              </td>
              <td>
                {component.title}
              </td>
              <td>
                {component.city}
              </td>
            </TableRow>
          )}
        </tbody>
      </Table>
    </Box>
  )
}

const Hoverable = () => 
  <Box colorIndex={'grey-1'} onClick={() => console.log('Box clicked')}>
    Hoverable Box
  </Box>

ReactDOM.render(
  <Box>
    <NotHoverable />
    <hr />
    <Hoverable />
  </Box>,
  document.getElementById('container')
);

Answer 1

Grommet 的设计理念是移动优先或至少对移动设备友好。

虽然点击大致等同于点击，但鼠标悬停在触摸设备上没有类似物。 onClick 几乎是用词不当，因为它来自抽象的 JavaScript-y 思考方式——许多组件有 onActive 或 onSelect 处理程序。

正如您自己指出的那样，使用一些 CSS 或 SCSS 来补救这个问题相当容易 - 请记住移动用户永远不会看到它。 :)

为什么 TableRow 在 Grommet 中不能悬停？

Why is TableRow not hoverable in Grommet?

javascript

reactjs

grommet