css - 在 React Griddle 中选择一行，并更改 tr 背景颜色

Question

我只是想知道是否有人已经能够在 React Griddle 中通过单击(仅一次)来更改行的颜色。

我正在尝试使用 JQuery，甚至使用 Griddle 元数据，但它可能会以更干净的方式完成？

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

我可以使用onClick事件获取数据，但无法在onClick事件中切换背景颜色，或使用元数据。

谢谢!

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

Answer 1

您可以使用react-grididdle props rowMetadata和onRowClick为此:

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)}
      />
    );
  }
}

现在这添加了 selected所选类(class) <tr>元素，这样您就可以 use custom styles添加颜色或任何您想要应用于所选行的样式。

请注意，Griddle Github issues 中需要一个更方便的用于选择行的 API。 .