Повесить событие на кнопку

@Accuracy · Регистрация: 14.12.2014

Студворк — интернет-сервис помощи студентам

Привет всем.
помогите решить задачу, App одностраничный .

На странице должны отображаться данные из базы, возможность добавлять новые данные, удалять, редактировать.
Данные вытягиваю с помощью node + express, в json потом забираю их react и показываю на странице.
Показ и добавления даних я реализовал, криво реализовал удаление через дополнительное поле и кнопку которая удаляет все данные по полю имя.
следовательно вопрос:
1. я понимаю, что правильно добавить кнопки прямо туда, где вывожу данные, к каждому поля, но как сделать чтобы она передавала свой индетификатор в функцию и удаляла только 1 запись из базы. а толку будет криво как зделал я
2. по этой причине не могу реализовать редактирования потому что не понимаю как редактировать именно этот элемент.
3.если есть ссылки на ресурсы где это можно посмотри бросайте два дня поиска не дают спать)), а то в нете примеры как работать с формой и только добавлять данные, ну и axios к которому еще руки не дошли.
Р.С. Не пинайте больно =)

СЕРВ

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
const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
 
const app = express();
 
const SELECT_ALL_PRODUCTS_QUERY = 'SELECT * FROM products';
 
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '1234',
    database: 'react_sql'
});
 
connection.connect(err => {
    if(err){
        return err;
    }
});
 
app.use(cors());
 
 
// show 
app.get('/', (req, res) => {
    res.send('go to /product')
});
 
// show all
app.get('/products', (req, res) => {
    connection.query(SELECT_ALL_PRODUCTS_QUERY, (err, results) => {
        if(err){
            return res.send(err)
        }
        else{
            return res.json({
                data: results
            })
        }
    })
});
 
// add new
app.get('/products/add', (req, res) => {
    const { name, price } = req.query;
    console.log(name, price);
    const INSERT_PRODUCTS_QUERY = `INSERT INTO products(name, price) VALUES('${name}', '${price}')`;
    connection.query(INSERT_PRODUCTS_QUERY, (err, results) => {
        if(err) {
            return res.send(err)
        }
        else {
            return res.send('successful')
        }
    });
});
 
// add delete
app.get('/products/delete', (req, res) => {
    const { name } = req.query;
    console.log(name);
    const DELETE_PRODUCTS_QUERY = `DELETE FROM products WHERE name ='${name}'`;
    connection.query(DELETE_PRODUCTS_QUERY, (err, results) => {
        if(err) {
            return res.send(err)
        }
        else {
            return res.send('successful')
        }
    });
});
 
 
app.listen(4000, () => {
    console.log('Product listing')
});

REACT

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
import React, { Component } from 'react';
 
import './App.css';
 
class App extends Component {
 
  state = {
    products: [],
    product: {
      name: 'sample',
      delete_name: 'insert name',
      price: 20
    }
  }
 
  componentDidMount() {
    this.getProducts();
  }
 
 
  // show products
  getProducts = _ =>{
    fetch('http://localhost:4000/products')
      .then(response => response.json())
      .then(response => this.setState({ products: response.data }))
      .catch(err => console.error(err))
  }
 
  // add products
  addProduct = _ => {
    const { product } = this.state;
    fetch(`http://localhost:4000/products/add?name=${product.name}&price=${product.price}`)
      .then(this.getProducts)
      .catch(err => console.error(err))
  }
 
  // delete products
  deleteProduct = _ => {
    const { product } = this.state;
    fetch(`http://localhost:4000/products/delete?name=${product.delete_name}`)
      .then(this.getProducts)
      .catch(err => console.error(err))
 
  }
 
 
  renderProduct = ({ ID, name, price }) => 
    <div key={ID}>
        <p> {ID} {name} {price} </p> 
    </div>
 
 
  render() {
    const { products, product } = this.state;
    return (
      <div className="App">
          <div>
 
            {products.map(this.renderProduct)} 
 
            <br/>
            
          </div>
 
 
          <div>
            <input
            value={product.name} 
            onChange={e => this.setState({ product: { ...product, name: e.target.value}})}/>
            <input
            value={product.price} 
            onChange={e => this.setState({ product: { ...product, price: e.target.value}})}/>
 
            <button onClick={this.addProduct}> Add product </button>
         </div>
            
         <div>
            <input
            value={product.delete_name} 
            onChange={e => this.setState({ product: { ...product, delete_name: e.target.value}})}/>
 
            <button onClick={this.deleteProduct}> Delete product </button>
         </div>
    
      </div>
    );
  }
}
 
export default App;

Добавлено через 16 часов 5 минут
Решил задание с удалением елемента осталось редагирование.

Помогите реализировать редагирование

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
  // delete products
    deleteProd = item =>{
    console.log('this is:', item);
    var kolya = "http://localhost:4000/products/delete?ID=" + item;
    console.log('this is kolya:', kolya);
    fetch(kolya)
      .then(this.getProducts)
      .catch(err => console.error(err))
}
 
 
render() {
    const listItem = this.state.products.map((item)=>{
        return <div key={item.ID}>
        <span>{item.name}</span> <button onClick={this.deleteProd.bind(this, item.ID)}>Delete</button>
                                <button>Edit</button>
 
      </div>
    })
 
    return (
      <div className="App">
          {listItem}
     </div>
)}

@Evgen1337 · 09.07.2018, 13:52

в экспресс добавить

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Читать тут, какой экспресс версии?
//https://stackoverflow.com/questions/11625519/how-to-access-the-request-body-when-posting-using-node-js-and-express
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
...
    app.post('/products/edit', (req, res) => {
      const { name } = req.body; // здесь будет item
      console.log(name);
      // здесь Update
      // const DELETE_PRODUCTS_QUERY = `DELETE FROM products WHERE name ='${name}'`;
      // connection.query(DELETE_PRODUCTS_QUERY, (err, results) => {
      //   if (err) {
      //     return res.send(err)
      //   }
      //   else {
      //     return res.send('successful')
      //   }
      // });
    });

на клиенте:

JavaScript
1
2
3
  edit = (e, item) => {
    fetch('/products/edit', { method: 'POST', body: JSON.stringify(item) })
  }

HTML5
1
<button onClick={(e, item) => this.edit(e, item)}>edit</button>

@Accuracy · 11.07.2018, 20:26 **[ТС]**

Спасибо тебе за помощь но там не все так просто.
Осталась 1 задача нужно прятать // показывать элемент после нажаття кнопки, я сделал неправильно из-за jquery но как правильно не знаю.

У меня у меня генерируется например 10 элементов, после нажатия кнопки
<button type="button" onClick={this.showEdit}>Edit</button> последний элемент скрывается показывается, а мне нужен тот на котором я нажимаю кнопку
Как это сделать ???

CSS
1
2
3
 .showEdit{
    display: none;
}

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
import $ from 'jquery';
 
showEdit = _ => {
  const el =findDOMNode(this.refs.showEdit);
  $(el).slideToggle();
 
render() {
 
        const { company } = this.state;
 
        const listItem = this.state.companies.map((item)=>{
        return (<div key={item.id} className="showDetail border border-info rounded">
              <span>Company: {item.NameMain}</span>
              <br/>
              <span>Profit: ${item.Profit} </span> 
              <br/>
              <span>Children: {item.NameChild} </span>
              <br/>
              <span>ChildEarnings: ${item.ChildEarnings} </span>
              <br/>
 
              <div className="buuutton">  
                <button type="button" className="btn btn-info buuutton" onClick={this.showEdit}>Edit</button>
                <button type="button" className="btn btn-danger buuutton" onClick={this.deleteCompanies.bind(this, item.id)}>Delete</button>
              </div>
 
              <div ref='showEdit' className="show Edit form-group"> <h3> Enter data </h3>
                <input className="form-control" placeholder="new company name"
                   onChange={e => this.setState({ company: { ...company, nameMain: e.target.value}})}/>
                <input className="form-control" placeholder="new name Child" 
                  onChange={e => this.setState({ company: { ...company, nameChild: e.target.value}})}/>
                <input className="form-control" placeholder="new  profit"
                  onChange={e => this.setState({ company: { ...company, profit: e.target.value}})}/>
                <input className="form-control" placeholder="new child Earnings" 
                  onChange={e => this.setState({ company: { ...company, childEarnings: e.target.value}})}/>
 
                 <div className="buuutton">     
                  <button className="btn btn-success" type="button" onClick={this.editCompanies.bind(this, item.id)}>Save</button>
                </div>
 
              </div>
              </div>)
                })

Добавлено через 14 минут
ну и еще одно у меня в 1папке запускается сервер node index, а в другой react npm start, можно ли их запускать вместе одной командой ?

@Evgen1337 · 11.07.2018, 22:23

В целом, неправильно готовишь реакт ,) ну какой жуКвари, какой дом?

Надо понять, что реакт это рендерер, подсунул модель данных он нарисовал, изменил модель данных он перерисовал... никаких действий с дом'ом делать не надо. Да есть рефы, но это когда ну ни как... Не показывать форму, нужно через Conditional Rendering, передать в родителя Lifting State Up, передать глобально Context, прочитать об этом нужно тут https://reactjs.org/docs/getting-started.html

вот тебе форма с explicit сейвом

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
import React, { Component } from 'react'
import './App.css';
 
class Form extends Component {
 
  constructor(props) {
    super(props)
    const { item } = props;
    this.state = { item }
  }
 
  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.item.id !== nextProps.item.id) return { item: nextProps.item }
    else return null
  }
 
  updateInfo = (e) => {
    this.setState({
      item: {
        ...this.state.item,
        info: e.target.value
      }
    })
  }
 
  render() {
    return <div>
      info
      <input type="text" value={this.state.item.info} onChange={this.updateInfo} />
      <button onClick={() => this.props.saveForm(this.state.item)}>save</button>
      <button onClick={this.props.closeForm}>close</button>
    </div>
  }
}
 
class App extends Component {
 
  state = {
    items: [
      { id: 1, title: 'item1', info: '' },
      { id: 2, title: 'item1', info: '' },
    ],
    selectedItem: null
  }
 
  saveForm = (item) => {
    var nextItems = Object.assign([], [...this.state.items]);
    nextItems.forEach(i => {
      if (i.id === item.id) {
        i.info = item.info
      }
    })
    this.setState({ items: nextItems, selectedItem: null })
  }
 
  setSelectedItem = (item) => {
    this.setState({ selectedItem: item })
  }
 
  closeForm = () => {
    this.setSelectedItem(null)
  }
 
  render() {
    return <div>
      {this.state.items.map((item, idx) => <span key={idx} onClick={(e) => this.setSelectedItem(item)}>{item.title} - {item.info}</span>)}
      {this.state.selectedItem ? <Form item={this.state.selectedItem} saveForm={this.saveForm} closeForm={this.closeForm} /> : null}
    </div>
  }
}
 
export default App

Сообщение от Accuracy

ну и еще одно у меня в 1папке запускается сервер node index, а в другой react npm start, можно ли их запускать вместе одной командой ?

Можно, но это надо понимать, что хочешь... (SSR, CS)

https://github.com/facebook/create-react-app

https://github.com/zeit/next.js/

@Accuracy · 12.07.2018, 00:25 **[ТС]**

я понимаю что делаю неправильно, нужно создать в стейт смену истинно / ложь, и ею проверять показывать форму или нет,
это мой первый проект на react, изучаю 5 день, по несколько часов, выполняю для того чтобы попасть на учебу в іт фирму.
Надо развернуть проект в интернете пример heroku, поэтому и спрашивал о 1 команде на js
мой говнокод на гите https://github.com/phpslonuk/n... /README.md
мало времени, мало опыта

@Evgen1337 · 12.07.2018, 13:33

ОК, тут посмотри, кра + экспресс + хероку:

https://medium.freecodecamp.or... 5c48acb1b0
https://originmaster.com/runni... 9a39fe7851
https://github.com/mars/heroku-cra-node

Добавлено через 53 секунды
вообще если есть дедик (dedicated server) на каком-нибудь хостинге, и там можно поставить node, тогда можно без хероку

@Accuracy · 12.07.2018, 17:34 **[ТС]**

спасибо тебе добрый человек

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Accuracy 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 35
	12.07.2018, 00:25 [ТС]
	я понимаю что делаю неправильно, нужно создать в стейт смену истинно / ложь, и ею проверять показывать форму или нет, это мой первый проект на react, изучаю 5 день, по несколько часов, выполняю для того чтобы попасть на учебу в іт фирму. Надо развернуть проект в интернете пример heroku, поэтому и спрашивал о 1 команде на js мой говнокод на гите https://github.com/phpslonuk/n... /README.md мало времени, мало опыта Миниатюры 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	12.07.2018, 13:33
	ОК, тут посмотри, кра + экспресс + хероку: https://medium.freecodecamp.or... 5c48acb1b0 https://originmaster.com/runni... 9a39fe7851 https://github.com/mars/heroku-cra-node Добавлено через 53 секунды вообще если есть дедик (dedicated server) на каком-нибудь хостинге, и там можно поставить node, тогда можно без хероку 0

@Accuracy 0 / 0 / 0 Регистрация: 14.12.2014 Сообщений: 35
	12.07.2018, 17:34 [ТС]
	спасибо тебе добрый человек 0