如何允许用户点击行答案

【问题标题】：How to allow users to click on rows如何允许用户点击行
【发布时间】：2018-10-09 14:06:57
【问题描述】：

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

【问题讨论】：

第一件事永远不要直接在渲染中绑定函数，而是在构造函数中绑定并在 onClick 事件中使用引用。关于您的问题，您是否尝试过 event.target.id 和 event.target.value？
@Think-Twice，另一种可能性是使用静态箭头函数来绑定上下文。如onRowClick = (row) => {}
@Moritz Roessler 箭头函数确实会在每次组件呈现时创建一个新函数。它与直接在渲染中的绑定功能相同。请在此处查看接受的答案，详细说明何时使用箭头功能以及何时不使用箭头功能stackoverflow.com/questions/52031147/…
@Think-Twice 我已经在构造函数中绑定了它。见更新。但这并不能解决我的问题
你看我的评论了吗？

标签： javascript reactjs griddle

【解决方案1】：

也许试试这个

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

【讨论】：

【解决方案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)}
     />
   )}}>

【讨论】：