我正在使用索环开发应用程序。库中的一堆组件有一个onClick prop,当你为一个组件的onClick prop提供一个回调函数时,它就变得可以运行了。但TableRow组件似乎没有发生这种情况。小提琴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')
);
答案 0 :(得分:0)
Grommet采用移动优先设计,或至少适合移动设备的理念。
虽然点击大致相当于点击,但鼠标悬停在触摸设备上没有模拟。 onClick
几乎是一个误称,因为它来自一种抽象的JavaScript-y思考方式 - 许多组件都有onActive
或onSelect
处理程序。
正如您已经注意到的那样,使用一些CSS或SCSS可以很容易地解决这个问题 - 请记住,移动用户永远不会看到它。 :)