javascript - ReactJS 中的搜索功能

Question

import React, { PropTypes } from 'react';
 import { Link, browserHistory } from 'react-router';

 import * as DataConnectionAction from '../../actions/dataconnectionAction.jsx';
 import DataConnectionStore from '../../store/dataconnectionstore.jsx';




 class DataSource extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        datasourcelist: [],

    };
    this._dataconnectionStoreChange = this._dataconnectionStoreChange.bind(this);
}

componentWillMount() {
    DataConnectionStore.on('change', this._dataconnectionStoreChange);
}

componentWillUnmount() {
    DataConnectionStore.removeListener('change', this._dataconnectionStoreChange);
}
componentDidMount() {
    DataConnectionAction._getDataSourcesList();
}

_dataconnectionStoreChange(type) {
    if (type == 'DataSourcesList') {
        let datasourcelist = DataConnectionStore._getDataSourceList() || {};
        this.setState({ datasourcelist: datasourcelist.dataconnections });
    }

}

DataSourceView(el) {
    let data = {
        id: el.dataConnectionName
    }

}

_handleSearchChange(e) {

    let value = e.target.value;
    let lowercasedValue = value.toLowerCase();
    let datasourcedata = this.state.datasourcelist;
    let datasourcelist = datasourcedata && datasourcedata.filter(el => el.dataConnectionName.toLowerCase().includes(lowercasedValue));
    this.setState({ datasourcelist });
}

DataSourcesCardUI() {
    let datasourcedata = this.state.datasourcelist;
      return (
        datasourcedata && datasourcedata.map((el) =>
            <div key={el.key}>
                <div className="col-md-3 topadjust">
                    <div className="panel panel-default datasource_panel ">
                        <div className="panel-heading">
                            <h5 className="panel_title"><i className="fa fa-database"></i> &nbsp; {el.dataConnectionName}</h5>


                        </div>
                        <Link className="panel-body" onClick={this.DataSourceView.bind(this, el)}>
                            <div className="datasource_txt text-center">
                                <h6>{el.databaseHost}</h6>
                                <h6>{el.dataConnectionType} </h6>
                                <p>{el.createdDate}</p>
                            </div>
                        </Link>

                    </div>
                </div>

            </div>

        )
    );
}


render() {

    return (
          <div>
                <section className="content_block">
                    <div className="container-fluid">
                        <div className="row dashboard_list">
                            {this.DataSourcesCardUI()}
                        </div>
                    </div>
                </section>
            </div>







    );
}
 }

export default DataSource;

这里我遇到一个问题，那就是我可以根据 dataConnectionName 进行过滤，但是当我尝试通过名称更改进行过滤时，它是从第一个过滤器数组数据中进行过滤。

但是，如果我删除并再次输入，我需要根据数据数组进行过滤。

示例:当我尝试使用 Cu 进行搜索时，我得到了正确的结果。但当我再次删除 Cu 并搜索 User 时，它不是从数据数组中搜索，而是从过滤器数组数据中搜索。相反，当我删除并使用其他键搜索时，它应该从 data 数组中过滤。

请指导我我做错了什么。

Answer 1

您可以保留一个单独的数组，在其中放置与搜索匹配的所有元素，而不是覆盖您所在州的数据。

示例

let data = [
  {
    dataConnectionName: "Customer_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-23",
    createBy: "Admin"
  },
  {
    dataConnectionName: "User_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-24",
    createBy: "Admin"
  },
  {
    dataConnectionName: "Manager_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-25",
    createBy: "Admin"
  },
  {
    dataConnectionName: "Director_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-26",
    createBy: "Admin"
  }
];

// Give each element a unique id that is used as key
data.forEach(el => el.id = Math.random());

class App extends React.Component {
  state = {
    data,
    filteredData: data
  };

  _handleSearchChange = e => {
    const { value } = e.target;
    const lowercasedValue = value.toLowerCase();

    this.setState(prevState => {
      const filteredData = prevState.data.filter(el =>
        el.dataConnectionName.toLowerCase().includes(lowercasedValue)
      );

      return { filteredData };
    });
  };

  render() {
    const { filteredData } = this.state;

    return (
      <div>
        <input onChange={this._handleSearchChange} placeholder="Search"/>
        {filteredData.map(el => (
          <div key={el.key}>
            <div>
              {el.dataConnectionName} - {el.pluginName} - {el.createdDate} - {el.createBy}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>