Как сделать редактирование данных в самой таблице React

@MEXAHIK · Регистрация: 26.10.2013

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

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

Страница с таблицей ListPersonaComponent.jsx:

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
import React, {Component} from 'react'
import ApiService from "../../ApiService";
import $ from 'jquery';
 
    class ListPersonaComponent extends Component {
 
        constructor(props) {
            super(props)
            this.state = {
                persons: [],
                message: null
            }
            this.deletePersona = this.deletePersona.bind(this);
            this.editPersona = this.editPersona.bind(this);
            this.addPersona = this.addPersona.bind(this);
            this.reloadPersonaList = this.reloadPersonaList.bind(this);
        }
 
        componentDidMount() {
            this.reloadPersonaList();
        }
 
        reloadPersonaList() {
            ApiService.fetchPersons()
                .then((res) => {
                    this.setState({persons: res.data.result})
                });
        }
 
        deletePersona(personaId) {
            ApiService.deletePersona(personaId)
                .then(res => {
                    this.setState({message: 'Persona deleted successfully.'});
                    this.setState({persons: this.state.persons.filter(persona => persona.id !== personaId)});
                })
 
        }
 
        editPersona(id) {
            window.localStorage.setItem("personaId", id);
            this.props.history.push('/edit-persona');
        }
 
        addPersona() {
            window.localStorage.removeItem("personaId");
            this.props.history.push('/add-persona');
        }
 
        render() {
            return (
                <div className="container mt-4 col-12">
                    <div className="card border-secondary">
                        <div className="card-header bg-secondary text-white">
                            <button className="btn btn-success" onClick={() => this.addPersona()}><i className="fa fa-plus"
                                                                                                  aria-hidden="true"></i> Add
                                Persona
                            </button>
 
                        </div>
                        <div className="card-body table-responsive-md">
 
 
                            <table className="table table-hover table-bordered">
                                <thead>
                                <tr className="bg-secondary text-white text-center">
                                    <th className="d-none">Id</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Nationality</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {
                                    this.state.persons.map(
                                        persona =>
                                            <tr key={persona.id}>
                                                <td>{persona.name }</td>
                                                <td>{persona.email}</td>
                                                <td>{persona.nationality}</td>
                                                <td className="text-center">
                                                    <button className="btn btn-md btn-warning"
                                                            onClick={() => this.editPersona(persona.id)}><i
                                                        className="fa fa-pencil" aria-hidden="true"></i> Edit
                                                    </button>
                                                    &nbsp;
                                                    <button className="btn btn-md btn-danger"
                                                            onClick={() => this.deletePersona(persona.id)}><i
                                                        className="fa fa-times" aria-hidden="true"></i> Delete
                                                    </button>
                                                </td>
                                            </tr>
                                    )
                                }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            );
        }
 
    }
 
export default ListPersonaComponent;

Страница где я сейчас редактирую записи EditPersonaComponent.jsx:

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
import React, {Component} from 'react'
import ApiService from "../../ApiService";
 
class EditPersonaComponent extends Component {
 
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            name: '',
            email: '',
            nationality: '',
        }
        this.savePersona = this.savePersona.bind(this);
        this.loadPersona = this.loadPersona.bind(this);
    }
 
    componentDidMount() {
        this.loadPersona();
    }
 
    loadPersona() {
        ApiService.fetchPersonaById(window.localStorage.getItem("personaId"))
            .then((res) => {
                let persona = res.data.result;
                this.setState({
                    id: persona.id,
                    name: persona.name,
                    email: persona.email,
                    nationality: persona.nationality,
                })
            });
    }
 
    onChange = (e) =>
        this.setState({[e.target.name]: e.target.value});
 
    savePersona = (e) => {
        e.preventDefault();
        let persona = {
            id: this.state.id, name: this.state.name, email: this.state.email,
            nationality: this.state.nationality
        };
        ApiService.editPersona(persona)
            .then(res => {
                this.setState({message: 'Persona added successfully.'});
                this.props.history.push('/persona');
            });
    }
 
 
    backToMain() {
        this.props.history.push('/persona');
    }
 
    render() {
        return (
            <div className="container mt-4 col-8">
                <div className="card border-secondary">
                    <div className="card-header bg-secondary text-white">
                        <h2 className="text-center">Edit Persona</h2>
                    </div>
                    <div className="card-body table-responsive-md">
 
                        <form>
 
                            <div className="form-group">
                                <label>Name:</label>
                                <input type="text" placeholder="name" name="name" className="form-control"
                                       readonly="true" defaultValue={this.state.name}/>
                            </div>
 
                            <div className="form-group">
                                <label>Email:</label>
                                <input placeholder="First Name" name="email" className="form-control"
                                       value={this.state.email} onChange={this.onChange}/>
                            </div>
 
                            <div className="form-group">
                                <label>Nationality:</label>
                                <input placeholder="Last name" name="nationality" className="form-control"
                                       value={this.state.nationality} onChange={this.onChange}/>
                            </div>
 
                            <button className="btn btn-success" onClick={this.savePersona}>Save</button>
                            &nbsp;
                            <button className="btn btn-primary" onClick={() => this.backToMain()}>Назад</button>
 
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}
 
export default EditPersonaComponent;

@drmedus · 15.10.2019, 09:31

А в чем конкретно вопрос? Что конкретно не получается?

@MEXAHIK · 15.10.2019, 09:42 **[ТС]**

На данный момент, я нажимаю на кнопку редактировать, у меня срабатывает переход на форму с инпутами в которые передаются данные по id, и вот я там редактирую и сохраняю. А мне нужно чтобы при нажатии на редактировать я оставался на странице моей таблицы, и можно было редактировать собственно в самой строке таблички.

@drmedus · 15.10.2019, 11:04

не сильно добавилось конкретики. В обработчике кнопки редактирования у вас

JavaScript
1
this.props.history.push('/edit-persona');

вместо этого перехода вам нужно рендерить компонент редактирования.

@MEXAHIK · 15.10.2019, 11:37 **[ТС]**

Попробую объяснить на картинках. Смотрите вот есть моя табличка:

Как сделать редактирование данных в самой таблице React

При нажатии на кнопку редактирования меня перенаправляет на форму редактирования:

Почему-то теги IMG не работают, оставлю просто ссылкой картинки.
Мне нужно как-то сделать так чтобы меня не перенаправляло на страницу с инпутами, а строка в таблице на против которой я нажал кнопку редактирования становилась полем для редактирования и потом появилась кнопка сохранить. Как-то так, надеюсь теперь понятнее. Не знаю как это сделать(

Добавлено через 21 минуту
Может можно переходить так же как я делаю, а в зависимости от того на против какой я строки нажал кнопку оно брало эту запись по id, а на той второй странице рендерить такую же таблицу только добавлять input-ы в строку которую я хочу редактировать. Но опять же, я даже малейшего представления не имею как это правильно сделать.

@drmedus · 15.10.2019, 13:58

MEXAHIK, по сути задачи стало понятнее, но конкретики по-прежнему не прибавилось.
Сдейлате в стейте флаг, который будет переключать в режим редактирования в зависимости от которого в строке будут рендерится либо инпуты либо просто текст, а кнопкой просто меняйте в стейте флаг.
Что конкретно у вас не получается?

@MEXAHIK · 15.10.2019, 14:14 **[ТС]**

к огромному сожалению я не знаю Реакт, это первое мое тестовое приложение, не знаю с чего начать, даже не знаю что такое стейт.

@drmedus · 15.10.2019, 14:19

Ничем помоч в таком случае не могу. Подсказать вам тут могут, писать за вас код - нет. Хотите начать - начните сначала. Прочтите доку по реакту, она написана доступным языком и даже есть на русском. Она не всеобъемлющая, но базу вам даст, а это вам и нужно.

@MEXAHIK · 15.10.2019, 14:54 **[ТС]**

Я могу попытаться делать по вашим подсказкам, только попрошу направлять меня в нужное русло. Правильно ли я создал флаг?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
constructor(props) {
            super(props)
            this.state = {
                persons: [],
                message: null,
                isEditMode: false - //флаг
            }
            this.deletePersona = this.deletePersona.bind(this);
            this.editPersona = this.editPersona.bind(this);
            this.addPersona = this.addPersona.bind(this);
            this.reloadPersonaList = this.reloadPersonaList.bind(this);
        }

@drmedus · 15.10.2019, 14:58

да. В строке теперь выводите либо текст либо инпут в зависимости от того true там или false.

@MEXAHIK · 15.10.2019, 15:42 **[ТС]**

Пытаюсь сделать так:

JavaScript
1
2
3
render() {
            const isChange = this.state.isEditMode;
            return (

и потом уже в табличке вот так

JavaScript
1
{isChange ? <td>{persona.name}</td> : <td><input type='text' className='form-control' value={persona.name}</td>}

но ругается ide "Parsing error: Unexpected token" явно что-то делаю не так...

а то я забыл тег закрыть input

JavaScript
1
 {isChange ? <td>{persona.name}</td> : <td><input type='text' className='form-control' value={persona.name}/></td>}

Переставил только td местами, а то там по умолчанию же true, оно мне делало инпутами.

Добавлено через 25 минут
Теперь вот тут добавил изменение перемененной на true:

JavaScript
1
2
3
4
5
editPersona(id) {
        window.localStorage.setItem("personaId", id);
        this.state.isEditMode = true;
        // this.props.history.push('/edit-persona');
    }

@MEXAHIK · 16.10.2019, 09:27 **[ТС]**

drmedus, добрый день, хотел показать что у меня пока получается. Но есть одна проблема, почему-то поле "name" не хочет редактироваться, а вот поля "email" и "nationality" редактируются прям в таблице.

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
import React, {Component} from 'react'
import ApiService from "../../ApiService";
import $ from 'jquery';
 
class ListPersonaComponent extends Component {
 
    constructor(props) {
        super(props)
        this.state = {
            persons: [],
            message: null,
            isEditMode: false,
            id: '',
            name: '',
            email: '',
            nationality: '',
        }
        this.deletePersona = this.deletePersona.bind(this);
        this.editPersona = this.editPersona.bind(this);
        this.addPersona = this.addPersona.bind(this);
        this.reloadPersonaList = this.reloadPersonaList.bind(this);
        this.savePersona = this.savePersona.bind(this);
        this.loadPersona = this.loadPersona.bind(this);
    }
 
 
    componentDidMount() {
        this.reloadPersonaList();
    }
 
    reloadPersonaList() {
        ApiService.fetchPersons()
            .then((res) => {
                this.setState({persons: res.data.result})
            });
    }
 
    deletePersona(personaId) {
        ApiService.deletePersona(personaId)
            .then(res => {
                this.setState({message: 'Persona deleted successfully.'});
                this.setState({persons: this.state.persons.filter(persona => persona.id !== personaId)});
            })
 
    }
 
    loadPersona() {
        ApiService.fetchPersonaById(window.localStorage.getItem("personaId"))
            .then((res) => {
                let persona = res.data.result;
                this.setState({
                    id: persona.id,
                    name: persona.name,
                    email: persona.email,
                    nationality: persona.nationality,
                })
            });
    }
 
    onChange = (e) =>
        this.setState({[e.target.name]: e.target.value});
 
    savePersona = (e) => {
        e.preventDefault();
        let persona = {
            id: this.state.id, name: this.state.name, email: this.state.email,
            nationality: this.state.nationality
        };
        ApiService.editPersona(persona)
            .then(res => {
                this.state.isEditMode = false;
                this.setState({message: 'Persona added successfully.'});
 
                this.props.history.push('/persona');
                this.reloadPersonaList();
            });
    }
 
    editPersona(id) {
        window.localStorage.setItem("personaId", id);
        this.state.isEditMode = true;
        this.loadPersona();
        // this.props.history.push('/edit-persona');
    }
 
    addPersona() {
        window.localStorage.removeItem("personaId");
        this.props.history.push('/add-persona');
    }
 
    render() {
        const isChange = this.state.isEditMode;
        return (
            <div className="container mt-4 col-12">
                <div className="card border-secondary">
                    <div className="card-header bg-secondary text-white">
                        <button className="btn btn-success" onClick={() => this.addPersona()}><i className="fa fa-plus"
                                                                                                 aria-hidden="true"></i>
                        </button>
 
                    </div>
                    <div className="card-body table-responsive-md">
 
 
                        <table className="table table-hover table-bordered">
                            <thead>
                            <tr className="bg-secondary text-white text-center">
                                <th className="d-none">Id</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Nationality</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.persons.map(
                                    persona =>
                                        <tr key={persona.id}>
 
                                            {isChange && window.localStorage.getItem("personaId") == persona.id ?
                                                <td><input type='text' className='form-control' name="name"
                                                           value={this.state.name}
                                                           onChange={this.onChange}/>
                                                </td> : <td>{persona.name}</td>}
 
 
                                            {isChange && window.localStorage.getItem("personaId") == persona.id ?
                                                <td><input type='text' className='form-control' name="email"
                                                           value={this.state.email}
                                                           onChange={this.onChange}/>
                                                </td> : <td>{persona.email}</td>}
 
                                            {isChange && window.localStorage.getItem("personaId") == persona.id ?
                                                <td><input type='text' className='form-control' name="nationality"
                                                           value={this.state.nationality}
                                                           onChange={this.onChange}/>
                                                </td> : <td>{persona.nationality}</td>}
 
                                            <td className="text-center">
                                                <button className="btn btn-md btn-warning"
                                                        onClick={() => this.editPersona(persona.id)}><i
                                                    className="fa fa-pencil" aria-hidden="true"></i>
                                                </button>
                                                &nbsp;
                                                <button className="btn btn-md btn-danger"
                                                        onClick={() => this.deletePersona(persona.id)}><i
                                                    className="fa fa-times" aria-hidden="true"></i>
                                                </button>
                                                &nbsp;
                                                <button className="btn btn-success" onClick={this.savePersona}><i
                                                    className="fa fa-save"></i></button>
                                            </td>
                                        </tr>
                                )
                            }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        );
    }
 
}
 
export default ListPersonaComponent;

@drmedus · 16.10.2019, 10:03

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

почему-то поле "name" не хочет редактироваться

это конкретно как не хочет?

@MEXAHIK · 16.10.2019, 10:12 **[ТС]**

не сохраняется изменение текущего значения, я нажимаю редактировать, таблица перегружается, строка делается инпутами, но почему-то поле name не сохраняется после нажатия на кнопку

HTML5
1
<button className="btn btn-success" onClick={this.savePersona}><i className="fa fa-save"></i></button>

остальные же поля сохраняются после редактирования. Получается поле name просто перезаписывает текущее значение.

@drmedus · 16.10.2019, 10:25

бегло просмотрел, визуально код в порядке. Дебажить нужно... вероятно с аписервисом что-то не так. Делайте логи на каждом этапе и смотрите что происходит.

@MEXAHIK · 16.10.2019, 10:52 **[ТС]**

хорошо, спасибо за совет, буду разбираться

Добавлено через 23 минуты
Вы были правы, вот здесь у меня было вот так вот:

Java
1
2
3
4
5
6
7
8
9
 @Override
    public PersonaDto update(PersonaDto personaDto) {
        Persona persona = findById(personaDto.getId());
        if(persona != null) {
            BeanUtils.copyProperties(personaDto, persona,  "name");
            personaDao.save(persona);
        }
        return personaDto;
    }

убрал name так как это указывалось поля для игнорирования и вроде как все заработало.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	15.10.2019, 09:31
	А в чем конкретно вопрос? Что конкретно не получается? 0

@MEXAHIK 0 / 0 / 0 Регистрация: 26.10.2013 Сообщений: 18
	15.10.2019, 09:42 [ТС]
	На данный момент, я нажимаю на кнопку редактировать, у меня срабатывает переход на форму с инпутами в которые передаются данные по id, и вот я там редактирую и сохраняю. А мне нужно чтобы при нажатии на редактировать я оставался на странице моей таблицы, и можно было редактировать собственно в самой строке таблички. 0

@MEXAHIK 0 / 0 / 0 Регистрация: 26.10.2013 Сообщений: 18
	15.10.2019, 11:37 [ТС]
	Попробую объяснить на картинках. Смотрите вот есть моя табличка: При нажатии на кнопку редактирования меня перенаправляет на форму редактирования: Почему-то теги IMG не работают, оставлю просто ссылкой картинки. Мне нужно как-то сделать так чтобы меня не перенаправляло на страницу с инпутами, а строка в таблице на против которой я нажал кнопку редактирования становилась полем для редактирования и потом появилась кнопка сохранить. Как-то так, надеюсь теперь понятнее. Не знаю как это сделать( Добавлено через 21 минуту Может можно переходить так же как я делаю, а в зависимости от того на против какой я строки нажал кнопку оно брало эту запись по id, а на той второй странице рендерить такую же таблицу только добавлять input-ы в строку которую я хочу редактировать. Но опять же, я даже малейшего представления не имею как это правильно сделать. 0

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	15.10.2019, 13:58
	Сообщение было отмечено MEXAHIK как решение Решение MEXAHIK, по сути задачи стало понятнее, но конкретики по-прежнему не прибавилось. Сдейлате в стейте флаг, который будет переключать в режим редактирования в зависимости от которого в строке будут рендерится либо инпуты либо просто текст, а кнопкой просто меняйте в стейте флаг. Что конкретно у вас не получается? 1

@MEXAHIK 0 / 0 / 0 Регистрация: 26.10.2013 Сообщений: 18
	15.10.2019, 14:14 [ТС]
	к огромному сожалению я не знаю Реакт, это первое мое тестовое приложение, не знаю с чего начать, даже не знаю что такое стейт. 0

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	15.10.2019, 14:19
	Ничем помоч в таком случае не могу. Подсказать вам тут могут, писать за вас код - нет. Хотите начать - начните сначала. Прочтите доку по реакту, она написана доступным языком и даже есть на русском. Она не всеобъемлющая, но базу вам даст, а это вам и нужно. 1

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	15.10.2019, 14:58
	да. В строке теперь выводите либо текст либо инпут в зависимости от того true там или false. 1

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	16.10.2019, 10:25
	бегло просмотрел, визуально код в порядке. Дебажить нужно... вероятно с аписервисом что-то не так. Делайте логи на каждом этапе и смотрите что происходит. 1

Как сделать редактирование данных в самой таблице React

Решение