代码之家 › 专栏 › 技术社区 › An User

如何根据react引导表中的选择过滤json数组?

filter reactjs json

An User · 技术社区 · 6 年前

我是一个初学英语的人。我正在使用react引导表从json加载产品列表。单击compare按钮,我想根据用户选择过滤json,其中PartNumber是所有产品的唯一字段。

下面是我的代码,这是我的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;

0 回复 | 直到 6 年前

Varun Suresh Kumar 6 年前

似乎您已将相同的函数传递给onSelect和button click操作,但它们有不同的操作。此外,处理所有可能的行动,以避免未来的问题

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