OnClick не работает, когда я пытаюсь изменить значение переменной

В React я пытаюсь изменить отображение двух элементов при нажатии определенных кнопок. Я либо хочу, чтобы заголовок отображался, либо ввод для редактирования заголовка. В моем заголовке div есть className переменной с именем «titleDisplay» со значением «isDisplayed». У меня есть функция, настроенная для переключения на «notDisplayed»

let titleDisplay = 'isDisplayed';
let editDisplay = 'notDisplayed';
const editDisplayed = () => {
        editDisplay = 'isDisplayed'
        titleDisplay = 'notDisplayed'
    }
<button onClick = {editDisplayed} id = "edit-btn">EDIT</button>
<div className = {titleDisplay}>
   <h2 className='indieNotebookTitle'>{notebook?.title}</h2>
</div>
.isDisplayed {
    display: block;
}

.notDisplayed {
    display: none;
}

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

React будет повторно отображать компонент только в ответ на изменение состояния. Переназначение переменной само по себе почти никогда не имеет побочных эффектов, если только эта переменная не используется позже. Ваше переназначение editDisplay будет видно только другим функциям в той же привязке компонента (очень редкое явление в React и обычно индикатор логической проблемы).

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

const [editingTitle, setEditingTitle] = useState(false);
<button onClick = {() => setEditingTitle(false)} id = "edit-btn">EDIT</button>
<div className = {editingTitle ? 'isDisplayed' : 'notDisplayed'}>
   <h2 className='indieNotebookTitle'>{notebook?.title}</h2>
</div>

О Конечно! Мой мозг весь день выгорел от кодинга, я совсем забыл про useState. Спасибо!

Jon Evan Moore 09.04.2022 06:17

Другие вопросы по теме