Форум программистов, компьютерный форум, киберфорум
JavaScript: ReactJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
2 / 2 / 1
Регистрация: 21.11.2017
Сообщений: 30
1

Реализация больших данных React

22.01.2018, 22:44. Просмотров 1191. Ответов 5
Метки нет (Все метки)

Всем привет, сразу к делу:
Задача стоит так, есть Главная страница, где отображается список всех товаров, есть кнопка добавить. Потом на странице добавить, есть поля (Название и порядка 30 полей для информации) при это они разделены на категории, примерно так: "категория1 - 7 полей, категория2 - 13 полей и тд..

Как лучше сделать эту информацию?
Мои предложения: Сделать для каждой свои данные,
Javascript
1
this.state={product: {title:'', pole1:'', pole:2'' ..., pole30:''}
Но думаю что это смешно?

Подскажите как реализовать это лучше?

п.с. Потом мне надо редактировать эти данные, добавлять новые товары и просто просматривать.

Всем спасибо
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.01.2018, 22:44
Ответы с готовыми решениями:

Постраничный вывод данных на react
Привет. Сразу к сути - нужно сделать на react постраничный вывод товаров. Вывод всех товаров на...

Обновление данных firebase в React приложении
Доброго времени суток!) Интегрирую в React-приложение типа todo-list подключение к Firebase....

React.JS + Redux. Отправка запроса и чтение данных JSON
Всем привет. Работаю на ASP.NET Core. Подключил React/Redux. И теперь есть одна проблема. Создал...

Как сделать редактирование данных в самой таблице React
Привет народ, очень нужна ваша помощь, сделал небольшое приложение Crud работающее с базой данных,...

5
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 768
Записей в блоге: 5
22.01.2018, 23:33 2
С помощью модального окна по очереди выводить категории, которые необходимо заполнять.
0
36 / 34 / 12
Регистрация: 04.06.2014
Сообщений: 218
23.01.2018, 14:01 3
Цитата Сообщение от zAndrey95 Посмотреть сообщение
Мои предложения: Сделать для каждой свои данные,
Тут на самом деле дело фантазии. Действительно можно разбить очень большую форму на отдельные компоненты (то есть каждая категория это отдельный компонент), удобнее будет ориентироваться в коде, плюс можно будет переиспользовать отдельные категории(тобиш компоненты) где, то в других местах проекта.
0
2 / 2 / 1
Регистрация: 21.11.2017
Сообщений: 30
23.01.2018, 15:02  [ТС] 4
shaman92, так делал, но а как потом их редактировать на другой странице? если мы их передаем через props?
0
36 / 34 / 12
Регистрация: 04.06.2014
Сообщений: 218
23.01.2018, 15:21 5
Откуда вы получаете информацию о продуктах?

У Вас должно быть какое-то хранилище данных будь то сервер или localStorage, на главной страничке вы делаете запрос за данными, отображаете список. На страничке добавить вы заполняете форму и (делаете запрос на добавление) дописываете получившийся элемент в хранилище, потом при заходе на главную вы его увидите. (исхожу из того что мы говорим не о SPA)

Данные в хранилище будут выглядеть примерно так
Javascript
1
2
3
4
5
6
7
8
var products = [
    {id: 1, title:'', pole1:'', pole:2'' ..., pole30:'', ...}, //первый продукт
    {id: 2, title:'', pole1:'', pole:2'' ..., pole30:'', ...}, //второй
    {id: 3, title:'', pole1:'', pole:2'' ..., pole30:'', ...}, //и т.д.
    {id: 4, title:'', pole1:'', pole:2'' ..., pole30:'', ...}, 
    {id: 5, title:'', pole1:'', pole:2'' ..., pole30:'', ...}, 
    ...
]

А при заходе на страницу редактирования опять нужно сходить в хранилище, но получить только нужный элемент например по id и его данные вставить в форму

Может я не правильно вопрос понял, а вообще код в студию.
0
2 / 2 / 1
Регистрация: 21.11.2017
Сообщений: 30
23.01.2018, 16:53  [ТС] 6
shaman92, Resume,

Кода много, вот так сделал инфу:

Javascript
1
2
3
4
5
6
7
8
9
class App extends Component {
  constructor () {
    super();
    this.state={ products: [
        {name:'zzz', code: '123', currency:  'CHF', priceA:  '2345', priceB: '2500'},
        {name:'bbb', code: '456',currency:  'USD', priceA:  '2567', priceB: '2789'}], 
        newName:'', newCode:'', newCurrency:'', newPriceA:'', newPriceB:'', show: true
    }
  }
Какие могут быть замечания?

Еще вопрос есть, как реализовать вывод информации о одном продукте? Нажимаю на заголовок товара и появляется снизу инфа о этом товаре, так со всеми. Пытаюсь сделать через роутер, но не знаю как

Весь код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React, {Component} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import './App.css';
 
class App extends Component {
  constructor () {
    super();
    this.state={ products: [
        {name:'zzz', code: '123', currency:  'CHF', priceA:  '2345', priceB: '2500'},
        {name:'bbb', code: '456',currency:  'USD', priceA:  '2567', priceB: '2789'}], 
        newName:'', newCode:'', newCurrency:'', newPriceA:'', newPriceB:'', show: true
    }
  }
    
  handleNameChange(event){
        this.setState({newName: event.target.value});
  }
  handleCodeChange(event){
        this.setState({newCode: event.target.value});
  }
  handleCurrencyChange(event){
        this.setState({newCurrency: event.target.value});
  }
  handlePriceAChange(event){
        this.setState({newPriceA: event.target.value});
  }  
  handlePriceBChange(event){
        this.setState({newPriceB: event.target.value});
  }
 
//save new item in a list
  saveProd(event,index){
    if (this.state.newName !='')
          {this.state.products.push({
                name: this.state.newName, 
                code: this.state.newCode, 
                currency: this.state.newCurrency, 
                priceA: this.state.newPriceA,
                priceB: this.state.newPriceB});
          this.setState({products: this.state.products});
          this.setState({newName:''});
          this.setState({show: !this.state.show});
          event.preventDefault();}
     else {
          this.setState({show: !this.state.show});
       }
    }
 
//add new item in a list
  addProd(){
      this.setState({show: !this.state.show});
    }
 
//sort item:
  sortItem(value){
    function compare(a,b) {
      if (a[value] > b[value]) return 1;
      if (a[value] < b[value]) return -1;
      return 0;
    }
 
    let array = this.state.products.sort(compare);
    this.setState({array});
  }
 
  render(){  
     if(!this.state.show) { [B]{/*Добавление новых данных */}[/B]
 
          var showList = <div><h4>Page2</h4>
              <button onClick={this.saveProd.bind(this)}>Save</button>
              <form>
                      <input value={this.state.newName} onChange={this.handleNameChange.bind(this)}/>
                      <input value={this.state.newCode} onChange={this.handleCodeChange.bind(this)}/>
                      <input value={this.state.newCurrency} onChange={this.handleCurrencyChange.bind(this)}/>
                      <input value={this.state.newPriceA} onChange={this.handlePriceAChange.bind(this)}/>
                      <input value={this.state.newPriceB} onChange={this.handlePriceBChange.bind(this)}/>
              </form>
               <hr/>
          </div>}
 
          else{
            var hideList = <button onClick={this.addProd.bind(this)}>Add</button>
          }
 
          return (
          <div>
             {showList}
              
              <h4>Page1</h4>
                  <table className="table">
                      <tr>
                          <th onClick={this.sortItem.bind(this, 'name')}>Name</th>
                          <th onClick={this.sortItem.bind(this, 'code')}>Code</th>
                          <th onClick={this.sortItem.bind(this, 'currency')}>Currency</th>
                          <th onClick={this.sortItem.bind(this, 'priceA')}>PriceA</th>
                          <th onClick={this.sortItem.bind(this, 'priceB')}>PriceB</th>
                      </tr>
 
                      <List contantProp = {this.state.products} />
 
 
                  </table>
                      {hideList}
          </div>);
}
}
 
 
//show list:
class List extends Component {
  
  render(){
    
    return(
      
            <tbody >
                  {this.props.contantProp.map((item, index) => {
                    return <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.code}</td>
                    <td>{item.currency}</td>
                    <td>{item.priceA}</td>
                    <td>{item.priceB}</td>
                    </tr>
 })
                 }
                 
            </tbody>
          
);
  }
}
 
[B]{/*Вывести данные о одном товаре*/}[/B]
class Display extends Component {
  
  
  render(){
    
    return(
   <div><ListItem /></div>
  
);
  }
}
 
export default App
Любые замечания приму ко внимаю, только изучаю все это и не знаю как лучше или проще реализовать что-то
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.01.2018, 16:53

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Реализация больших чисел
Всем привет. Появилась потребность реализовать операции( +,-,*,/) для чисел большой длины. Для...

реализация больших чисел
Появилась надобность в реализации программы, работающей с большими числами. Взял библиотеку здесь....

Фильтрация данных в react.js
у меня есть combobox(марки автомобилей) и grid (модели авто). как можно с помощью react выводить в...

Какая реализация коллекций подойдет для больших объемов?
Добрый день! В коллекциях планируется хранить длинные последовательности числовых ключей. Потом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.