1

我正在使用 griddle-react 来显示表格。我无法使每个单元格可点击。现在我只想将 id 值打印到控制台。这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import Griddle, { plugins } from "griddle-react";

import "./styles.css";

const styleConfig = {
  icons: {
    TableHeadingCell: {
      sortDescendingIcon: <small>(desc)</small>,
      sortAscendingIcon: <small>(asc)</small>
    }
  },
  classNames: {
    Row: "row-class"
  },
  styles: {
    Filter: { fontSize: 18 },
    NextButton: {}
  }
};

export default class App extends React.Component {
  getData() {
    var data = [
      {
        id: 0,
        name: "Mayer Leonard",
        city: "Kapowsin",
        state: "Hawaii",
        country: "United Kingdom",
        company: "Ovolo",
        favoriteNumber: 7
      },
      {
        id: 1,
        name: "Mayer Leonard",
        city: "Kapowsin",
        state: "Hawaii",
        country: "United Kingdom",
        company: "Ovolo",
        favoriteNumber: 7
      }

    ];
    return data;
  }

  constructor() {
    super();
    this.state = {
      data: this.getData(),
      selectedRowId: 0
    };
    this.onRowClick = this.onRowClick.bind(this);
  }

  onRowClick(row) {
    this.setState({ selectedRowId: row.props.data.id });
    console.log("SELECTED");
  }

  render() {
    const { data } = this.state;
    const rowMetadata = {
      bodyCssClassName: rowData =>
        rowData.id === this.state.selectedRowId ? "selected" : ""
    };
    return (
      <Griddle
        styleConfig={styleConfig}
        data={data}
        plugins={[plugins.LocalPlugin]}
        rowMetadata={rowMetadata}
        onRowClick={this.onRowClick}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如您所见，我的表中只有两条具有不同 ID 的记录。因此，如果我单击第一行的任意位置，我想打印值“0”，即 id，而对于第二行，我想打印值“1”。任何帮助都会很棒！

4

2 回答 2

0

也许试试这个

  onRowClick(event) {
      this.setState({ selectedRowId: event.target.id });
  }
于 2018-10-09T14:51:24.250 回答
0

您可以使用 RowEnhancer 来满足您的需求，在下面的情况下，我将通过控制台记录单击行的 id

  <Griddle
    styleConfig={styleConfig}
    data={data}
    plugins={[plugins.LocalPlugin]}
    rowMetadata={rowMetadata}
    components={{
    RowEnhancer: OriginalComponent => props => (
     <OriginalComponent
        {...props}
        onClick={() => console.log(data[props.griddleKey].id)}
     />
   )}}>
于 2019-05-06T14:51:36.013 回答