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 が異なる 2 つのレコードしかありません。したがって、最初の行のどこかをクリックすると、ID である値「0」を出力し、2 行目では値「1」を出力したいと思います。どんな助けでも素晴らしいでしょう！

4

2 に答える 2

0

おそらくこれを試してみてください

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