#reactjs
Вопрос:
Это данные моей таблицы, откуда поступают данные
let mainArray = [
{
id: 1,
name: "foo",
city: "dallas",
category: "one",
type: "A",
active: "FALSE",
// state: "guj"
},
{
id: 2,
name: "bar",
city: "dallas",
category: "one",
type: "B",
active: "FALSE",
//state: "guj"
},
{
id: 3,
name: "jim",
city: "san francisco",
category: "one",
type: "B",
active: "TRUE",
//state: "raj"
},
{
id: 4,
name: "jane",
city: "denver",
category: "two",
type: "C",
active: "FALSE",
//state: "mah"
},
];
Это моя часть JSX
<div className="App">
{mainArray.map((u, key) => (
<>
<div>
<div>
City : {u.city} <input type="checkbox"></input>
</div>
<br></br>
</div>
<>
<div>
Category :{u.category} <input type="checkbox"></input>
</div>
<br></br>
</>
<>
<div>
Type :{u.type} <input type="checkbox"></input>
</div>
<br></br>
</>
<>
<div>
Active :{u.active} <input type="checkbox"></input>
</div>
<br></br>
</>
</>
))}
Name : <input type="text" name="" />
<br></br>
<table border="5px" align="center">
<thead>
<td>ID</td>
<td>Name</td>
<td>City</td>
<td>Category</td>
<td>Type</td>
<td>Status</td>
</thead>
<tbody>
{mainArray.map((item, i) => {
return (
<>
<tr key={i}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.city}</td>
<td>{item.category}</td>
<td>{item.type}</td>
<td>{item.active}</td>
</tr>
</>
);
})}
</tbody>
</table>
</div>
Мой вопрос в том, что я хочу, чтобы все данные были отфильтрованы, если я проверил.
Если я проверил какие-либо данные, то они должны быть отфильтрованы, и в таблице происходят изменения.
Я использовал код W3School для своей страницы, и он отлично работает, но фильтрует только один столбец, не знаю, как создавать циклы, но переход туда-более простое решение.
вот ссылка : https://stackblitz.com/edit/react-nw38ow
Ответ №1:
Я попытался использовать состояние в react.
const [mainArray, setMainArray] = useState([values from mainArray ])
<div>
City : {u.city}{' '}
<input
type="checkbox"
value={u.city}
onChange={(event) => filterData(event.target, 'city')}
></input>
</div>
function filterData(target, type) {
if (target.checked) {
let result = mainArray.filter((res) => res[type] == target.value);
setMainArray([...result]);
}
}
При нажатии на состояние основного массива проверки будет отфильтрован
Комментарии:
1. спасибо, он работает, но если я снял флажок, он не работает, если я сниму флажок, оригинал не должен прийти.
2. когда вы снимете флажок, должны прийти исходные данные ?
3. Если я проверил Денвер, то данные по Денверу показывают меня, но если я снял флажок, Денвер По-прежнему показывает мне только данные по Денверу,
Ответ №2:
Я внес некоторые изменения в ваш код. Я думаю, это то, чего ты хочешь
import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const [filters, setFilters] = useState({
city: [],
category: [],
type: [],
active: [],
});
const [filterState, setFilterState] = useState({
name: '',
city: [],
category: [],
type: [],
active: [],
});
let mainArray = [
{
id: 1,
name: 'foo',
city: 'dallas',
category: 'one',
type: 'A',
active: 'FALSE',
// state: "guj"
},
{
id: 2,
name: 'bar',
city: 'dallas',
category: 'one',
type: 'B',
active: 'FALSE',
//state: "guj"
},
{
id: 3,
name: 'jim',
city: 'san francisco',
category: 'one',
type: 'B',
active: 'TRUE',
//state: "raj"
},
{
id: 4,
name: 'jane',
city: 'denver',
category: 'two',
type: 'C',
active: 'FALSE',
//state: "mah"
},
];
const handleCity = (e) => {
let arr = filterState.city;
if (e.target.checked) {
if (!arr.indexOf(e.target.value) > -1) {
arr.push(e.target.value);
setFilterState({
...filterState,
city: arr,
});
}
} else {
if (arr.indexOf(e.target.value) > -1) {
arr.splice(arr.indexOf(e.target.value), 1);
setFilterState({
...filterState,
city: arr,
});
}
}
};
const handleCategory = (e) => {
let arr = filterState.category;
if (e.target.checked) {
if (!arr.indexOf(e.target.value) > -1) {
arr.push(e.target.value);
setFilterState({
...filterState,
category: arr,
});
}
} else {
if (arr.indexOf(e.target.value) > -1) {
arr.splice(arr.indexOf(e.target.value), 1);
setFilterState({
...filterState,
category: arr,
});
}
}
};
const handleType = (e) => {
let arr = filterState.type;
if (e.target.checked) {
if (!arr.indexOf(e.target.value) > -1) {
arr.push(e.target.value);
setFilterState({
...filterState,
type: arr,
});
}
} else {
if (arr.indexOf(e.target.value) > -1) {
arr.splice(arr.indexOf(e.target.value), 1);
setFilterState({
...filterState,
type: arr,
});
}
}
};
const handleActive = (e) => {
let arr = filterState.active;
if (e.target.checked) {
if (!arr.indexOf(e.target.value) > -1) {
arr.push(e.target.value);
setFilterState({
...filterState,
active: arr,
});
}
} else {
if (arr.indexOf(e.target.value) > -1) {
arr.splice(arr.indexOf(e.target.value), 1);
setFilterState({
...filterState,
active: arr,
});
}
}
};
const getCities = (cities) => (
<div>
<div>
City :{' '}
{cities
.filter((item, i, ar) => ar.indexOf(item) === i)
.map((city) => (
<>
{city}{' '}
<input
type="checkbox"
value={city}
onChange={(e) => handleCity(e)}
></input>
</>
))}
</div>
<br></br>
</div>
);
const getCategories = (categories) => (
<div>
Category :
{categories
.filter((item, i, ar) => ar.indexOf(item) === i)
.map((category) => (
<>
{category}{' '}
<input
type="checkbox"
value={category}
onChange={(e) => handleCategory(e)}
></input>
</>
))}
</div>
);
const getTypes = (types) => (
<div>
Type :
{types
.filter((item, i, ar) => ar.indexOf(item) === i)
.map((type) => (
<>
{type}{' '}
<input
type="checkbox"
value={type}
onChange={(e) => handleType(e)}
></input>
</>
))}
</div>
);
const getActive = (actives) => (
<div>
Active :
{actives
.filter((item, i, ar) => ar.indexOf(item) === i)
.map((active) => (
<>
{active}{' '}
<input
type="checkbox"
value={active}
onChange={(e) => handleActive(e)}
></input>
</>
))}
</div>
);
useEffect(() => {
let city = filters.city;
let category = filters.category;
let type = filters.type;
let active = filters.active;
mainArray.forEach((item) => {
city.push(item.city);
category.push(item.category);
type.push(item.type);
active.push(item.active);
});
setFilters({
...filters,
city: city,
category: category,
type: type,
active: active,
});
}, []);
return (
<div>
{getCities(filters.city)}
{getCategories(filters.category)}
<br></br>
{getTypes(filters.type)}
<br></br>
{getActive(filters.active)}
<br></br>
Name :{' '}
<input
type="text"
name=""
onChange={(e) =>
setFilterState({ ...filterState, name: e.target.value })
}
/>
<br></br>
<table border="5px" align="center">
<thead>
<td>ID</td>
<td>Name</td>
<td>City</td>
<td>Category</td>
<td>Type</td>
<td>Status</td>
</thead>
<tbody>
{mainArray
.filter(
(item) =>
(item.name.includes(filterState.name) ||
filterState.name == '') amp;amp;
(filterState.city.includes(item.city) ||
filterState.city.length == 0) amp;amp;
(filterState.category.includes(item.category) ||
filterState.category.length == 0) amp;amp;
(filterState.type.includes(item.type) ||
filterState.type.length == 0) amp;amp;
(filterState.active.includes(item.active) ||
filterState.active.length == 0)
)
.map((item, i) => {
return (
<>
<tr key={i}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.city}</td>
<td>{item.category}</td>
<td>{item.type}</td>
<td>{item.active}</td>
</tr>
</>
);
})}
</tbody>
</table>
</div>
);
}
Комментарии:
1. большое спасибо, это то, чего я хочу, но я также хочу , чтобы в приведенной выше таблице название города, категория и т. Д. Имели повторяющееся значение, например , город имеет значение 2 раза в Далласе, тип имеет 2 раза В и т. Д. Все эти повторяющиеся значения, я хочу, чтобы эти повторяющиеся значения не имели только уникального значения, я хочу отобразить….заранее спасибо
2. Я отредактировал код. Теперь он включает в себя все условия, которые вы упомянули в своем комментарии.
3. спасибо, это работает для меня, В моем основном массиве , Если я хочу добавить динамические значения, и он должен отображаться в таблице и выше табличных значений?, Это возможно , например, в таблице,вы пишете статические значения, такие как Город, категория, активный и т.д., Если я хочу добавить состояние : «Махарашта» во всех объектах массива, в моем основном массиве, то как он должен отображаться в таблице и выше табличных значений,??
4. Да, вы можете сопоставлять ключи объектов и иметь любые данные, которые вам нужны. Если потребуется какая-либо помощь, держите меня в курсе
5. Да, я сделал это, но я не могу исправить 1 ошибку, Если я добавляю данные только в один объект, есть 2 флажка , где добавлено вместо одного, как я могу исправить?