В 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 до сих пор работал с функциями.
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. Спасибо!