made it work for ram sticks data

This commit is contained in:
2026-04-03 00:46:19 +10:00
parent abe69ecefc
commit 4a6659f26e
4 changed files with 39 additions and 37 deletions

View File

@@ -1,14 +1,12 @@
import { useState } from 'react'
import Table from './components/Table.jsx';
import buildings from './data.js';
import ram_sticks from './data.js';
import './CSS/App.css'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<h3>Самые высокие здания и сооружения</h3>
<Table data={ buildings } amountRows="15" />
<Table data={ ram_sticks } amountRows="15" />
</div>
)
}

View File

@@ -11,14 +11,16 @@ const Filter = (props) => {
const handleSubmit = (event) => {
event.preventDefault();
const readNumConstrain = (name, event) => [event.target[name + "From"].value == "" ? null : Number(event.target[name + "From"].value), event.target[name + "To"].value == "" ? null : Number(event.target[name + "To"].value)]
// создаем словарь со значениями полей формы
const filterField = {
"Название": event.target["structure"].value.toLowerCase(),
"Тип": event.target["type"].value.toLowerCase(),
"Страна": event.target["country"].value.toLowerCase(),
"Город": event.target["city"].value.toLowerCase(),
"Год":[event.target["yearFrom"].value==""?null:Number(event.target["yearFrom"].value),event.target["yearTo"].value==""?null:Number(event.target["yearTo"].value)],
"Высота":[event.target["heightFrom"].value==""?null:Number(event.target["heightFrom"].value),event.target["heightTo"].value==""?null:Number(event.target["heightTo"].value)]
"type": event.target["type"].value.toLowerCase(),
"name": event.target["name"].value.toLowerCase(),
"size": readNumConstrain("size", event),
"maker": event.target["maker"].value.toLowerCase(),
"release": readNumConstrain("release", event),
"price": readNumConstrain("price", event)
};
//фильтруем данные по значениям всех полей формы
@@ -37,32 +39,34 @@ const Filter = (props) => {
return (
<form onSubmit={handleSubmit} onReset={handleSubmit}>
<p>
<label>Название:</label>
<input name="structure" type="text" />
</p>
<p>
<label>Тип:</label>
<label>Type:</label>
<input name="type" type="text" />
</p>
<p>
<label>Страна:</label>
<input name="country" type="text" />
<label>Name:</label>
<input name="name" type="text" />
</p>
<p>
<label>Город:</label>
<input name="city" type="text" />
<label>Size from (gb):</label>
<input name="sizeFrom" type="numer" />
<label>to:</label>
<input name="sizeTo" type="numer" />
</p>
<p>
<label>Год от:</label>
<input name="yearFrom" type="number" />
<label>до:</label>
<input name="yearTo" type="number" />
<label>Maker:</label>
<input name="maker" type="text" />
</p>
<p>
<label>Высота от:</label>
<input name="heightFrom" type="number" />
<label>до:</label>
<input name="heightTo" type="number" />
<label>Release year from:</label>
<input name="releaseFrom" type="number" />
<label>to:</label>
<input name="releaseTo" type="number" />
</p>
<p>
<label>Price from:</label>
<input name="priceFrom" type="number" />
<label>Price to:</label>
<input name="priceTo" type="number" />
</p>
<p>

View File

@@ -32,7 +32,7 @@ const Table = (props) => {
return (
<>
<h4>Фильтры</h4>
<h4>Filters</h4>
<Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />
<table>

View File

@@ -1,5 +1,5 @@
const ram_sticks = [
let ram_sticks = [
{ "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
{ "type": "DDR3", "name": "DDR3-1600-8GB-A2", "size": 8, "maker": "Corsair", "release": "2015-06", "price": 26, },
{ "type": "DDR3", "name": "DDR3-1866-8GB-A3", "size": 8, "maker": "G.Skill", "release": "2016-02", "price": 29, },