Reactjs react表上的行级操作：react Js

我正在尝试实现一个功能，在单击每一行时，我需要获得被单击行的信息，并且相应的行颜色应该更改为其他颜色。当我用Ctrl+鼠标点击选择多行时，对应行的颜色也应该改变，并且需要以数组的形式获取对应行的信息。我需要一个通用的gettrops函数来实现这两个功能。有人能帮我解决这个问题吗

代码沙盒：

应用程序

import*as React from“React”；
从“react dom”导入{render}；
从“/DataGrid”导入DataGrid；
从“反应表”导入{Column}；
接口IProps{}
界面状态{
数据：IUser[]；
列：第[]列；
}
导出接口IUser{
名字：字符串；
状态：“已提交”|“待定”|“已批准”；
年龄：弦；
}
导出接口图标{
标题：字符串；
存取器：字符串；
}
类应用程序扩展了React.Component{
建造师（道具：IProps）{
超级（道具）；
此.state={
数据：[]，
列：[]
};
}
componentDidMount（）{
这是getData（）；
这是getColumns（）；
}
getData=（）=>{
常数数据：IUser[]=[
{名字：“杰克”，状态：“已提交”，年龄：“14”}，
{名字：“西蒙”，状态：“待定”，年龄：“15”}，
{名字：“皮特”，状态：“批准”，年龄：“17”}
];
this.setState（{data}）；
};
getColumns=（）=>{
常量列：IColum[]=[
{
标题：“名字”，
访问者：“名字”
},
{
标题：“状态”，
访问者：“状态”
},
{
标题：“年龄”，
访问者：“年龄”
}
];
this.setState（{columns}）；
};
onClickRow=（行信息：IUser）=>{
log（“您单击：”+JSON.stringify（rowInfo））；
};
render（）{
返回(
);
}
}

---

数据网格

从“React”导入*作为React；
导入反应表{
RowInfo，
专栏，
组件属性
}从“反应表”；
导入“react table/react table.css”；
从“.”导入{IUser，IColum}；
接口IProps{
数据：IUser[]；
列：第[]列；
//这个？使它成为可选的
行单击？：（用户：IUser）=>void；
}
导出默认类DataGrid扩展React.Component{
行单击：ComponentPropsGetterR=（状态：任意，行信息：行信息）=>{
const rowClicked=this.props.rowClicked；
返回单击的行
? {
onClick:（）=>rowClicked（rowInfo.original作为IUser）
}
: {};
};
render（）{
返回(
);
}
}

以下是您的最终答案：

现在，您可以按住Ctrl键并选择任意多的行，并且可以在这两个行之间进行切换。 如果你不拿钥匙，你可以选择一个

您可以在每次选择行时看到行的颜色发生变化

您拥有此.state.allData中的所有数据

---

所有这些都可以在typescript中根据您的需要从沙箱中获取。

注释不用于扩展讨论；这段对话已经结束。@Amir RezvaniI提出了一个本机解决方案，其中select single row可以正常工作。可能我们可以将其扩展为ctrl-click for multiple rows将altKey更改为Ctrlkey想法是一样的，但在这里，当您使用索引时，您必须知道何时将索引保存到selectedRow之类的内容中以备将来使用。用户单击的行的索引与您保存的索引不同。我在这个链接上做了一点工作，但我将让您处理其余的工作。对于程序员来说，耐心地处理代码是很好的@阿米尔·雷兹瓦尼检查一下这个代码。我以不同的方式实现了，但是取消选择似乎不起作用，您能帮忙吗？

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import { Column } from "react-table";

interface IProps {}

interface IState {
  data: IUser[];
  columns: Column<IUser>[];
}
export interface IUser {
  firstName: string;
  status: "Submitted" | "Pending" | "Approved";
  age: string;
}
export interface IColum {
  Header: string;
  accessor: string;
}
class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      data: [],
      columns: []
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data: IUser[] = [
      { firstName: "Jack", status: "Submitted", age: "14" },
      { firstName: "Simon", status: "Pending", age: "15" },
      { firstName: "Pete", status: "Approved", age: "17" }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns: IColum[] = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ];
    this.setState({ columns });
  };

  onClickRow = (rowInfo: IUser) => {
    console.log("You clicked: " + JSON.stringify(rowInfo));
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
        <DataGrid data={this.state.data} columns={this.state.columns} />
      </>
    );
  }
}

import * as React from "react";
import ReactTable, {
  RowInfo,
  Column,
  ComponentPropsGetterR
} from "react-table";
import "react-table/react-table.css";
import { IUser, IColum } from ".";

interface IProps {
  data: IUser[];
  columns: Column<IUser>[];
  // The ? makes it optional
  rowClicked?: (user: IUser) => void;
}

export default class DataGrid extends React.Component<IProps> {
  rowClick: ComponentPropsGetterR = (state: any, rowInfo: RowInfo) => {
    const rowClicked = this.props.rowClicked;
    return rowClicked
      ? {
          onClick: () => rowClicked(rowInfo.original as IUser)
        }
      : {};
  };
  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        getTrProps={this.rowClick}
      />
    );
  }
}