如何根据从反应引导表中的选择过滤 json 数组？

Question

我是一名尝试学习 React JS 的初学者。我正在使用反应引导表从 json 加载产品列表。单击比较按钮时，我想根据用户选择过滤 json，其中“PartNumber”是所有产品的唯一字段。

任何人都可以帮助我如何获得过滤列表“onButtonSubmit”。我能够在“选定”中获得过滤后的产品零件号。我需要过滤与“选定”中的零件号匹配的 json 数组。我将根据我的要求格式化结果。

下面是我的代码，这是我的 JSON - https://jsonblob.com/412d2ac9-2f7c-11e9-9080-8bc34cc6c646

import React from 'react';
import MYResult from '../json/results.json';
import BootstrapTable from 'react-bootstrap-table-next';

class Container extends React.Component {

  state = {
    data: MYResult.Products || [],
    columns: MYResult.ParametricList_Attributes || [],
    isCompareClicked: false,
    selected: []
  };

  onButtonSubmit = (row, isSelect) => {
    this.setState({ isCompareClicked: true })
    if (isSelect) {
      this.setState(() => ({
        selected: [...this.state.selected, row.PartNumber]
      }));
    } else {
      this.setState(() => ({
        selected: this.state.selected.filter(x => x === row.PartNumber)
      }));
    }
    console.log("selectd is -- " + this.state.selected)
  }

  render() {
    var selectRowProp = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selected,
      onSelect: this.onButtonSubmit
    };

    return (
      <div>
        <button onClick={this.onButtonSubmit}>Compare</button>
        <br />
        <br />
        <BootstrapTable keyField='PartNumber' selectRow={selectRowProp}
          data={this.state.data} columns={this.state.columns} />
      </div>
    );
  }

}

export default Container;

Answer 1

您似乎已将相同的函数传递给 onSelect 和按钮单击操作，但它们有不同的操作。此外，处理所有可能的操作以避免将来出现问题

签出此沙盒full working code

import React from "react";
import ReactDOM from "react-dom";
import MYResult from "../json/results.json";
import BootstrapTable from "react-bootstrap-table-next";

import "./styles.css";

class Container extends React.Component {
  state = {
    data: MYResult.Products || [],
    pristineData: MYResult.Products || [],
    columns: MYResult.ParametricList_Attributes || [],
    isCompareClicked: false,
    selected: []
  };

  onSelectClick = (row, isSelect) => {
    let modifiedRow;
    if (isSelect) {
      modifiedRow = [...this.state.selected, row.PartNumber];
    } else {
      modifiedRow = this.state.selected.filter(x => x !== row.PartNumber);
    }
    this.setState({ isCompareClicked: true, selected: modifiedRow });
  };
  onButtonClick = () => {
    const data = this.state.data;
    const selectedData = this.state.selected;
    if (selectedData.length < 2) {
      alert("atleast two data needed to compare");
      return;
    }
    let filterredData = data.filter(row =>
      selectedData.includes(row.PartNumber)
    );
    this.setState({ data: filterredData });
  };

  onSelectAll = (isSelect, rows) => {
    let newRows = isSelect ? rows.map(row => row.PartNumber) : [];
    this.setState({ selected: newRows });
  };

  onClearClick = () => {
    this.setState(state => ({ data: state.pristineData, selected: [] }));
  };

  render() {
    console.log(this.state);
    var selectRowProp = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selected,
      onSelect: this.onSelectClick,
      onSelectAll: this.onSelectAll
    };

    return (
      <div>
        <button onClick={this.onButtonClick}>Compare</button>
        <button onClick={this.onClearClick}>Clear</button>
        <br />
        <br />
        <BootstrapTable
          keyField="PartNumber"
          selectRow={selectRowProp}
          data={this.state.data}
          columns={this.state.columns}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Container />, rootElement);