在React Griddle中选择一行，并更改tr背景颜色 [英] Selecting a Row in React Griddle, and changing tr background color

问题描述

我只是想知道是否有人已经能够改变行的颜色，在React Griddle，通过点击它（只是一次）。

I'm just wondering if someone has already been able to change the color of a row, in React Griddle, by clicking on it (just once).

我正在用JQuery做实验，甚至使用Griddle元数据，但是它可以以更清晰的方式完成？

I'm experimenting things with JQuery, and even with Griddle Metadata, but it may be done in a cleaner way ?

编辑：我使用React 15，Griddle MantraJS / Meteor，使用Mantra容器获取我的反应组件中的数据。

Edit : I'm using React 15, Griddle inside MantraJS/Meteor, getting the data in my react Component using a Mantra container.

我可以通过使用onClick事件获取数据，但不能切换背景颜色onClick事件或者使用Metadatas。

I can get the data by using onClick event, but not able to switch the background color in the onClick event, or playing with Metadatas.

谢谢！

编辑：我使用另一个视图来显示内容，所以现在我不需要改变我的表格单元格的背景，但如果我找到一个解决方案，我会完成这篇文章

EDIT : I use another view to display the content of the table, so for now I don't need to change the background of my tables cells, but if I found a solution I'll complete this post

推荐答案

您可以使用react-griddle props rowMetadata 和 onRowClick / p>

You can use react-griddle props rowMetadata and onRowClick to do this:

class ComponentWithGriddle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowId: 0,
    };
  }
  onRowClick(row) {
    this.setState({ selectedRowId: row.props.data.id });
  }
  render() {
    const rowMetadata = {
      bodyCssClassName: rowData => (rowData.id === this.state.selectedRowId ? 'selected' : ''),
    };
    return (
      <Griddle
        ...
        rowMetadata={rowMetadata}
        onRowClick={this.onRowClick.bind(this)}
      />
    );
  }
}

现在添加 元素， styling.htmlrel =nofollow>使用自定义样式添加颜色或要应用于所选行的任何样式。

Now this adds a selected class to the selected <tr> elements, so you can use custom styles to add colors or whatever styles you want to apply to the selected row.

请注意，在 Griddle Github问题中调用了更方便的用于选择行的API。

Note that a more convenient API for selecting rows has been called for in the Griddle Github issues.

这篇关于在React Griddle中选择一行，并更改tr背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！