Question

我正在使用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”。任何帮助都会很棒！

Answer 1

也许试试看

'Name2'

Answer 2

您可以使用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)}
     />
   )}}>

如何允许用户点击行

2 个答案: