Как разрешить пользователям нажимать на строки - PullRequest
Новая
       16

Как разрешить пользователям нажимать на строки

0 голосов
/ 09 октября 2018

Я использую griddle-реакции для отображения таблицы.У меня проблемы с тем, чтобы сделать каждую ячейку кликабельной.Сейчас я хотел бы просто напечатать значение 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);

Как видите, в моей таблице только две записи с разными идентификаторами.Поэтому, если я щелкну где-нибудь в первой строке, я бы хотел вывести значение «0», которое является идентификатором, а для второй строки я бы хотел вывести значение «1».Любая помощь будет отличной!

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Вы можете использовать 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)}
     />
   )}}>
0 голосов
/ 09 октября 2018

Возможно, попробуйте это 

  onRowClick(event) {
      this.setState({ selectedRowId: event.target.id });
  }
...