Переключатель режимов отображения Node + React

@Devilion123 · Регистрация: 29.10.2015

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

У меня имеется переключатель, отвечающий за переключение режимов отображения - в одном состоянии выводится форма для записи данных в БД, а в другом - таблица для вывода этих данных на место формы. Когда проводится тестовое переключение на вывод таблицы, все работает исправно, однако при повторном выводе формы эта же форма становится невидимой, хотя все элементы на месте и их функционал сохраняется. Не могу понять, в какую сторону думать, чтобы решить проблемы с отображением формы. Код прилагаю. Form.js, где выводится форма записи и встроен описанный ранее переключатель:

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, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Modal from "./Modal/Modal";
import { useInput } from "../hooks/use-form-validate";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPersonCircleCheck } from "@fortawesome/free-solid-svg-icons";
import DragDropFile from "./DragNDrop/DragDrop.js";
import axios from "axios";
import TableFormSwitcher from "./TableFormSwitcher";
import DataTable from "./DataTable";
import './Contacts/contacts-style.css';
// import "./FormStyles.css";
 
const sign = <FontAwesomeIcon icon={faPersonCircleCheck} size="2x" marginRight="10px" />;
 
function Form() {
  // Form validation
  const { t } = useTranslation();
  const title = useInput("", { isEmpty: true, minLength: 5 });
  const link = useInput("", { isEmpty: true, minLength: 2 });
  const text = useInput("", { isEmpty: true, minLength: 2 });
  const [modalActive, setModalActive] = useState(false);
  const [file, setFile] = useState(null); // State to store selected file
  const [displayTable, setDisplayTable] = useState(false);
 
  useEffect(() => {
    console.log(`Отображение таблицы: ${displayTable}`);
  }, [displayTable]);
 
  
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('title', title.value);
      formData.append('link', link.value);
      formData.append('text', text.value);
 
      const response = await axios.post("/api/uploadPhoto", formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
 
      if (response.status === 200) {
        console.log("Data successfully sent to the server");
        setModalActive(true);
      } else {
        console.error("Error sending data to the server:", response.statusText);
      }
    } catch (error) {
      console.error("Error sending data to the server:", error.message);
    }
  };
 
  const handleFileChange = (selectedFile) => {
    setFile(selectedFile);
  };
 
  const handleToggleDisplay = () => {
    setDisplayTable(!displayTable); // Toggle between form and table
    // console.log(displayTable);
  };
 
  return (
    <div>
      <TableFormSwitcher handleToggleDisplay={handleToggleDisplay} displayForm={!displayTable} setDisplayTable={setDisplayTable} />
      {displayTable ? (
        <DataTable />
      ) : (
        <form className="contact__form" onSubmit={handleSubmit}>
          <div className="input__data">
            <input
              onBlur={title.onBlur}
              value={title.value}
              onChange={title.onChange}
              className="name__input input form__control element-animation"
              type="text"
              placeholder={t("post.title")}
              name="title"
              required
            />
            {title.isDirty && title.isEmpty && <div className="form__error">{t("error.empty")}</div>}
            {title.isDirty && title.minLengthError && (
              <div className="form__error">{t("error.length")}</div>
            )}
          </div>
 
          <div className="input__data">
            <input
              onBlur={link.onBlur}
              value={link.value}
              onChange={link.onChange}
              className="link__input input form__control element-animation"
              type="text"
              placeholder={t("post.link")}
              name="link"
              required
            />
            {link.isDirty && link.isEmpty && <div className="form__error">{t("error.empty")}</div>}
            {link.isDirty && link.minLengthError && (
              <div className="form__error">{t("error.length")}</div>
            )}
          </div>
 
          <DragDropFile onFileChange={handleFileChange} />
 
          <div className="input__data">
            <textarea
              onBlur={text.onBlur}
              value={text.value}
              onChange={text.onChange}
              className="form__textarea form__control element-animation"
              name="text"
              id=""
              cols="30"
              rows="10"
              placeholder={t("post.text")}
            ></textarea>
            {text.isDirty && text.isEmpty && <div className="form__error">{t("error.empty")}</div>}
            {text.isDirty && text.minLengthError && (
              <div className="form__error">{t("error.length")}</div>
            )}
          </div>
 
          <div className="input__data">
            <button
              type="submit"
              className="form__btn form__control element-animation"
            >
              {t("post.button")}
            </button>
          </div>
 
          {modalActive && (
            <Modal
              active={modalActive}
              setActive={setModalActive}
              icon={sign}
              text={t("modal.message")}
            />
          )}
        </form>
      )}
    </div>
  );
}
 
export default Form;

Код переключателя под названием TableFormSwitcher.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { useState } from "react";
 
function TableFormSwitcher({ handleToggleDisplay, displayForm }) {
  const [isChecked, setIsChecked] = useState(displayForm);
 
  const toggleSwitch = () => {
    setIsChecked(!isChecked);
    if (typeof handleToggleDisplay === 'function') {
      handleToggleDisplay(); // Call handleToggleDisplay if it's a function
    }
  };
 
  return (
    <label className="switch">
      <input type="checkbox" checked={isChecked} onChange={toggleSwitch} />
      <span className="slider round"></span>
    </label>
  );
}
 
export default TableFormSwitcher;

krvsa · 11.03.2024, 16:42

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

Не могу понять, в какую сторону думать, чтобы решить проблемы с отображением формы.

Ответ на поверхности...
Нужно в TableFormSwitcher, используя setDisplayTable, менять значение displayTable.

При значении displayTable true - будет показываться <DataTable />.
В противном случае будет показана

HTML5
1
2
3
<form className="contact__form" onSubmit={handleSubmit}>
    // ...
</form>

@Devilion123 · 11.03.2024, 16:52 **[ТС]**

krvsa Так ведь у меня же так, по сути, и сделано. Свойство setDisplayTable привязывается к константе setDisplayTable, которая меняет состояние константы displayTable, от которой и зависит вывод необходимых компонентов. Или Вы про что-то такое?

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
import React, { useState } from "react";
 
function TableFormSwitcher({ handleToggleDisplay, displayForm, setDisplayTable }) {
  const [isChecked, setIsChecked] = useState(displayForm);
 
  const toggleSwitch = () => {
    setIsChecked(!isChecked);
    if (typeof handleToggleDisplay === 'function') {
      handleToggleDisplay(); 
    }
 
    if (typeof setDisplayTable === 'function') {
      setDisplayTable(!isChecked);
    }
  };
 
  return (
    <label className="switch">
      <input type="checkbox" checked={isChecked} onChange={toggleSwitch} />
      <span className="slider round"></span>
    </label>
  );
}
 
export default TableFormSwitcher;

krvsa · 11.03.2024, 17:27

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

Так ведь у меня же так, по сути, и сделано.

Отнюдь.
У тебя даже вызова setDisplayTable не было в, приведенном ранее, коде.

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

Вот твой вариант

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
import {useState, useEffect} from 'react';
import ReactDOM from 'react-dom/client';
 
//
function App() {
    const [val, setVal] = useState(false)
    return (
        <section>
            <Switch setVal={setVal} />
            {val ? <Table/> : <Form />} 
        </section>
    );
}
//
function Switch({setVal}) {
    const act = e => setVal(v => !v)
    return (
        <label>
            Переключатель
            <input type='checkbox' onChange={act} />
        </label>
    )
}
//
function Table() {
    return (
        <p>Таблица</p>
    )
}
//
function Form() {
    return (
        <p>Форма</p>
    )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

@Devilion123 · 12.03.2024, 11:36 **[ТС]**

krvsa, ответ действительно лежал на поверхности, но не в том русле. Согласен, моя ошибка заключается в том, что я не предоставил больше необходимой информации и больше вписал ненужной, но в Вашем случае переключатель "вшит" в самый верхний компонент "App", что не совсем верно с точки зрения компоновки в React-приложениях, ведь туда, по сути, вшивается вся страница, а родительских компонентов по сравнению с данным переключателем много, куда можно было бы его впихнуть. Так как я больше специализируюсь на бэкенд-разработке, мне было сложно ориентироваться во всех компонентах и я в последнюю очередь заметил компонент "Contacts", где идет вывод формы. Туда я и запихнул свой переключатель с условием на переключение вывода необходимых компонентов.

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
import React, { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next';
import Form from "../Form";
import './contacts-style.css'
import TableFormSwitcher from "../TableFormSwitcher";
import DataTable from "../DataTable";
 
const Contacts = () => {
  const {t, i18n} = useTranslation()
  const [displayTable, setDisplayTable] = useState(false);
  const [animateElements, setAnimateElements] = useState(true);
 
  const handleToggleDisplay = () => {
    setDisplayTable(!displayTable);
  };
 
  const handleAnimationEnd = () => {
    setAnimateElements(false);
  };
 
 
  return (
    <div>
      <section className="page__section contact-section">
        <h2 className="page__subtitle section-subtitle contact-subtitle element-animation">
          {t('post.header')}
        </h2>
        <TableFormSwitcher handleToggleDisplay={handleToggleDisplay} displayForm={!displayTable} />
        {displayTable ? <DataTable /> :  ( <Form onAnimationEnd={handleAnimationEnd} animateElements={animateElements} /> )}      
        </section>
    </div>
  );
};
 
export default Contacts;

Оставалось дело за малым - найти стили, которые принимают свойство "Opacity: 0", из-за чего и не показывается форма. Опять-таки в силу невнимательности и отсутствия обширного опыта во фронтенд-разработке я не лез во всякие CSS-файлы, поэтому сразу не заметил, что есть один такой, в котором описано данное свойство в классе ".element-animate", которое используется во всех инпутах формы. Поменял значения свойства на 1 и переключатель заработал как надо. Как мне подсказали пользователи с другого форума - код и без того был рабочим и надо было сразу копаться в стилях, просто я решил выделить больше времени на изучение остальных компонентов и нашел более удобное место для размещения переключателя.

Остаются только вопросы насчет стилей: правильно ли с точки зрения фронтенд-разработки ставить "вшивать" значение 1 для свойства "opacity" для подобных классов и удовлетворяет ли требованиям использование JQuery для их изменения с использованием JS?

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .