我正在使用React和Vanilla JS。 Demo
主要代码
import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils";
import Select from "react-select";
import "react-select/dist/react-select.css";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
import jsondata from "./sample";
class App extends React.Component {
constructor() {
super();
this.state = {
// data: makeData(),
data: jsondata,
filtered: [],
select2: null,
select3: null
};
this.uniqueOptions = this.uniqueOptions.bind(this);
}
onFilteredChangeCustom(value, accessor) {
console.log("The value is " + value);
let filtered = this.state.filtered;
console.log("the filtered items" + JSON.stringify(this.state.filtered));
let insertNewFilter = 1;
if (filtered.length) {
console.log("filtered.length " + filtered.length);
filtered.forEach((filter, i) => {
if (filter["id"] === accessor) {
if (value === "" || !value.length) filtered.splice(i, 1);
else filter["value"] = value;
insertNewFilter = 0;
}
});
}
if (insertNewFilter) {
filtered.push({ id: accessor, value: value });
}
this.setState({ filtered: filtered });
console.log("The filtered data is " + JSON.stringify(this.state.filtered));
}
uniqueOptions = (objectsArray, objectKey) => {
var a = objectsArray.map((o, i) => {
return o[objectKey];
});
return a.filter(function(i, index) {
return a.indexOf(i) >= index;
});
};
render() {
const { data } = this.state;
let first_names = null;
let last_names = null;
let first_names_label = null;
let last_names_label = null;
if (this.state.filtered.length == 1) {
if (this.state.filtered[0].id == "firstName") {
first_names_label = "First Name:";
} else {
first_names_label = "Last Name:";
}
first_names = this.state.filtered[0].value.map(name => <p>{name}</p>);
} else if (this.state.filtered.length == 2) {
first_names_label = "First Name:";
first_names = this.state.filtered[0].value.map(name => <p>{name}</p>);
last_names_label = "Last Name:";
last_names = this.state.filtered[1].value.map(name => <p>{name}</p>);
}
return (
<div>
<pre>
{first_names_label}
{first_names}
{last_names_label}
{last_names}
</pre>
<br />
<br />
Extern Select2 :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select2: entry });
this.onFilteredChangeCustom(
entry.map(o => {
return o.value;
}),
"firstName"
);
}}
value={this.state.select2}
multi={true}
options={this.uniqueOptions(this.state.data, "firstName").map(
(name, i) => {
return { id: i, value: name, label: name };
}
)}
/>
Extern Select3 :{" "}
<Select
style={{ width: "50%", marginBottom: "20px" }}
onChange={entry => {
this.setState({ select3: entry });
this.onFilteredChangeCustom(
entry.map(o => {
return o.value;
}),
"lastName"
);
}}
value={this.state.select3}
multi={true}
options={this.uniqueOptions(this.state.data, "lastName").map(
(name, i) => {
return { id: i, value: name, label: name };
}
)}
/>
<ReactTable
data={data}
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
if (typeof filter.value === "object") {
return row[id] !== undefined
? filter.value.indexOf(row[id]) > -1
: true;
} else {
return row[id] !== undefined
? String(row[id]).indexOf(filter.value) > -1
: true;
}
}}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
render(<App />, document.getElementById("root"));
我有一个已过滤状态变量(this.state.filtered),该变量具有下拉菜单中的所有已过滤项。
我想显示过滤后的状态变量
<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>
我已经能够对2个变量执行此操作。但是将来我会有10到15个下拉菜单。这就是为什么我想使用循环显示。该怎么做?
演示中的代码没有循环,我想使其成为通用代码,该代码可以显示this.state.filtered的所有键值对。如果没有循环,当我有大量下拉菜单时,我将无法使用此功能。值也应以逗号分隔。我也不想使渲染函数又脏又臭。我想基本上调用一个将显示键和值的函数