#javascript #reactjs #dom #react-state
#javascript #reactjs #dom #реагировать-состояние
Вопрос:
У меня есть эта функция в моем веб-приложении React:
const handleRateLightSelection = (cardId, rateId) => {
setRateLightSelected(0);
if (lastSelectedLightCardId != -1 amp;amp; lastSelectedLightCardId != cardId) {
document.getElementById('lightBox-' lastSelectedLightCardId).classList.remove("rate-box-grosso-light");
document.getElementById('lightBox-' lastSelectedLightCardId '-check').classList.add("d-none");
}
if (lastSelectedLightCardId == -1 || lastSelectedLightCardId != cardId) {
document.getElementById('lightBox-' cardId).classList.add("rate-box-grosso-light");
document.getElementById('lightBox-' cardId '-check').classList.remove("d-none");
setRateLightSelected(rateId);
} else {
var boxSelection = document.getElementById('lightBox-' cardId).classList.contains("rate-box-grosso-light");
if (boxSelection) {
document.getElementById('lightBox-' cardId).classList.remove("rate-box-grosso-light");
document.getElementById('lightBox-' cardId '-check').classList.add("d-none");
setRateLightSelected(0);
} else {
document.getElementById('lightBox-' cardId).classList.add("rate-box-grosso-light");
document.getElementById('lightBox-' cardId '-check').classList.remove("d-none");
setRateLightSelected(rateId);
}
}
lastSelectedLightCardId = cardId;
}
Используя document.getElementById функцию, я обрабатываю стили полей, когда пользователи их выбирают. Сейчас все работает нормально.
Оглядываясь назад, я добавил setRateLightSelected состояние для обработки сохранения идентификатора выбора и отправки его на мой сервер позже. После того, как я добавил this , document.getElementById функции перестали работать, и я не понимаю, почему?
Комментарии:
1. В приложении React вы вообще не должны этого делать; вместо этого поток таков: взаимодействие с пользователем изменяет состояние -> компонент повторно отображает с использованием обновленного состояния. Просто используйте выражения в вашем JSX, которые составляют список классов на основе состояния. Также обратите внимание, что изменения состояния являются асинхронными и группируются вместе, поэтому вызов одних и тех же функций setState несколько раз подряд не будет работать так, как вы ожидаете.
2. Где
lastSelectedLightCardIdобъявляется is ? Кстати, вы не должны играть с классами таким образом… Просто сравните значения состояний, чтобы добавить класс3. Пожалуйста, не используйте случайное выделение жирным шрифтом в своих сообщениях , это затрудняет их чтение. 🙂 И, как сказал Крис Джи, это просто принципиально, как вы делаете подобные вещи в React (хотя совершенно понятно, почему люди начинают в этом направлении даже в React, когда изучают его).
4. Привет @ChrisG, большое спасибо за ваш ответ! Не могли бы вы лучше объяснить, что вы имеете в виду, говоря «Просто используйте выражения в вашем JSX, которые составляют список классов на основе состояния». Я знаю, что состояния реакции созданы для обработки потока пользователей, но если я использую «обычные переменные», они не полностью видны в моем JSX (например. для обработки просмотра / скрытия «кнопки продолжения», исключение …)
5. Каждая переменная состояния должна быть видна во всей функции. Похоже, вы ищете условный рендеринг, простой пример
{isVisible amp;amp; <div>blah</div>}. Что касается класса, который я использую:const classes = ["card"]; if (x) classes.push("d-none");теперь у меня есть массив, содержащий все классы. В JSX я делаюclassName={classes.join(" ")}. Кроме того, составление идентификаторов — плохая практика; у вас, скорее всего, есть массив карточек; вы должны работать с ними на основе индекса массива напрямую, а не черезids, содержащие текущие числа.