react-table 上的行级操作:React Js [英] Row level operations on react-table: React Js

问题描述

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

Codesandbox:https://codesandbox.io/s/react-table-row-table-0bbyi

应用

import * as React from "react";从react-dom"导入{渲染}；从./DataGrid"导入DataGrid；从反应表"导入{列}；接口 IProps {}接口 IState {数据:IUser[];列:列[];}导出接口 IUser {名字:字符串；状态:已提交" |待定" |得到正式认可的";年龄:字符串；}导出接口IColum {标题:字符串；访问器:字符串；}类 App 扩展了 React.Component{构造函数(道具:IProps){超级(道具)；this.state = {数据: []，列: []};}componentDidMount() {this.getData();this.getColumns();}getData = () =>{常量数据:IUser[] = [{名字:杰克"，状态:已提交"，年龄:14"}，{名字:西蒙"，状态:待定"，年龄:15"}，{名字:皮特"，状态:批准"，年龄:17"}];this.setState({数据});};getColumns = () =>{const 列:IColum[] = [{标题:名字"，访问者:名字"},{标题:状态"，访问者:状态"},{标题:年龄"，访问者:年龄"}];this.setState({列});};onClickRow = (rowInfo: IUser) =>{console.log("你点击了:" + JSON.stringify(rowInfo));};使成为() {返回 (<><数据网格数据={this.state.data}列={this.state.columns}rowClicked={this.onClickRow}/><DataGrid data={this.state.data} columns={this.state.columns}/></>);}}

<小时>

数据网格

<预><代码>import * as React from "react";进口反应表，{行信息，柱子，ComponentPropsGetterR来自反应表"；导入反应表/反应表.css"；import { IUser, IColum } from ".";接口 IProps {数据:IUser[];列:列[];//这 ?使它成为可选的rowClicked?: (user: IUser) =>空白;}导出默认类 DataGrid 扩展了 React.Component{rowClick: ComponentPropsGetterR = (state: any, rowInfo: RowInfo) =>{const rowClicked = this.props.rowClicked;返回行点击?{onClick: () =>rowClicked(rowInfo.original as IUser)}:{};};使成为() {返回 (<反应表数据={this.props.data}列={this.props.columns}getTrProps={this.rowClick}/>);}}

解决方案

这是你的最终答案:https://codesandbox.io/s/react-table-row-table-3xwxi

您现在可以按住 Ctrl 键并选择任意数量的行，并且可以在它们之间切换.如果你不按住键，你可以选择一个

您可以看到每次选择行的行颜色变化.

并且您拥有 this.state.allData 中的所有数据.

所有这些都在打字稿中，如您所愿，从您的沙箱中获得.

I am trying to implement a feature where in on click of each row, I need to get the info of the row that is been clicked and corresponding row color should be changed to something else. And when I select multiple rows using Ctrl+mouse-click the corresponding rows color should also get changed, and need to get the info of corresponding rows in the form of array. I need to have a common getTrProps function that should implement both of this . Can someone help me out with this

Codesandbox: https://codesandbox.io/s/react-table-row-table-0bbyi

App

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} />
      </>
    );
  }
}

---

DataGrid

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}
      />
    );
  }
}

解决方案

Here is Your Final Answer : https://codesandbox.io/s/react-table-row-table-3xwxi

you can now hold Ctrl Key and Select as many row as you want and you can toggle between. and if you don't hold the key you can select one

you can see each time you choose a row color of the row Changes.

and you have all the data in this.state.allData.

and all of this in typescript as you want from your sandbox.

这篇关于react-table 上的行级操作:React Js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！