如何在 React Data Grid 中选择所需的输入字段进行过滤答案

【问题标题】：How to select the desired input field for filtering in React Data Grid如何在 React Data Grid 中选择所需的输入字段进行过滤
【发布时间】：2021-05-11 02:59:58
【问题描述】：

我正在尝试使用 Cypress 和 Reactjs（两个最新版本）编写一些测试。似乎我无法选择这些过滤输入字段，因为它们看起来都一样。有没有办法将 id/class 名称放到这些字段中？我对 React 和 Cypress 都是新手。谢谢

https://codesandbox.io/s/w6jvml4v45?from-embed=&file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import createRowData from "./createRowData";

import "./styles.css";

const defaultColumnProperties = {
  filterable: true,
  width: 120
};

const selectors = Data.Selectors;

const columns = [
  {
    key: "id",
    name: "ID"
  },
  {
    key: "title",
    name: "Title"
  },
  {
    key: "firstName",
    name: "First Name"
  },
  {
    key: "lastName",
    name: "Last Name"
  },
  {
    key: "email",
    name: "Email"
  },
  {
    key: "street",
    name: "Street"
  },
  {
    key: "zipCode",
    name: "ZipCode"
  },
  {
    key: "date",
    name: "Date"
  },
  {
    key: "jobTitle",
    name: "Job Title"
  },
  {
    key: "catchPhrase",
    name: "Catch Phrase"
  },
  {
    key: "jobArea",
    name: "Job Area"
  },
  {
    key: "jobType",
    name: "Job Type"
  }
].map(c => ({ ...c, ...defaultColumnProperties }));

const ROW_COUNT = 50;

const handleFilterChange = filter => filters => {
  const newFilters = { ...filters };
  if (filter.filterTerm) {
    newFilters[filter.column.key] = filter;
  } else {
    delete newFilters[filter.column.key];
  }
  return newFilters;
};

function getRows(rows, filters) {
  return selectors.getRows({ rows, filters });
}

function Example({ rows }) {
  const [filters, setFilters] = useState({});
  const filteredRows = getRows(rows, filters);
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => filteredRows[i]}
      rowsCount={filteredRows.length}
      minHeight={500}
      toolbar={<Toolbar enableFilter={true} />}
      onAddFilter={filter => setFilters(handleFilterChange(filter))}
      onClearFilters={() => setFilters({})}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example rows={createRowData(50)} />, rootElement);

【问题讨论】：

标签： reactjs cypress react-data-grid

【解决方案1】：

我会使用This specific attribute syntax 按键值选择它们：

cy.get(`input[key="${targetValue}"]`)
  .then(element => {
       //My code
   })

【讨论】：