Как React может добавлять и удалять вместе?
Я новичок в реакции и пытаюсь переключить класс тела с помощью двух разных кнопок. Один должен добавить класс с помощью события onClick, а другой должен удалить класс. Ниже приведен пример моего кода.
Прямо сейчас в консоли я дважды вижу, как событие срабатывает, но класс остается. Как я уже говорил, я новичок в React, поэтому знаю, что делаю это неправильно.
bodyFixed() {
document.body.classList.add('body-fixed');
}
bodyRelative() {
document.body.classList.remove('body-fixed');
}
Пожалуйста, покажите весь свой код. Мне кажется, что вы используете принципиально неправильную реакцию, но я не могу направить вас, не видя, как у вас эта настройка
@Ty Brooks, тебе удалось это реализовать? Вы можете проверить мой ответ, где я предоставил полный рабочий пример, и если у вас есть вопросы - не стесняйтесь спрашивать. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы пытаетесь изменить dom напрямую, как если бы вы использовали vanilla js или JQuery, но это нет, как должно использоваться реагирование. React создает виртуальный дом, который вы создаете и которым управляете, а затем реагирует на изменение страницы за вас.
Я рекомендую следовать руководству типа это, чтобы изучить базовые настройки и концепции (перейдите к той части, где он использует JSX). Я могу указать вам в правильном направлении, если вы покажете весь файл компонента.
Вы хотите переключить значение свойства className способом React.
Способ React - это свойство состояния и функция-обработчик, которая будет переключать значение состояния, а не напрямую управлять узлом DOM (как вы это делаете).
Я предлагаю вам взглянуть на Основные концепции React: обработка событий, а позже, когда вы почувствуете себя немного более комфортно, прочитать о Виртуальный DOM и Примирение в React.
Вот как это сделать:
const { classNames } = window
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
isToggled: true
}
this.toggleClass = this.toggleClass.bind(this)
}
toggleClass() {
const { isToggled } = this.state
this.setState({
isToggled: !isToggled
})
}
render() {
const { isToggled } = this.state
const className = classNames({
'body-fixed': isToggled
})
return <div className = {className}>
<div>Current `className`: <b>{ className }</b></div>
<button onClick = {this.toggleClass}>Toggle class</button>
</div>
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);<script src = "https://unpkg.com/[email protected]/index.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "container"></div>Я действительно не понимаю, почему вы должны хранить className в состоянии, а не как флаг в вашем состоянии? Почему бы не использовать почти стандартный пакет classnames :) Не забудьте привязать this.toggleClass в конструкторе, чтобы он не распространял изменения на все его дочерние элементы (хорошо, здесь это не так актуально, и dom в любом случае меняется, поскольку он ученик вы можете правильно выучить его на OP :)
Я смог использовать код, который я перечислил ранее. У меня были события onClick, расположенные неправильно. Вот пример кода, который я использовал:
bodyFixed() {
document.body.classList.add('body-fixed');
}
bodyRelative() {
document.body.classList.remove('body-fixed');
}
<Toggle>
{({on, getTogglerProps, setOn, setOff, toggle, showAlert}) =>
<div>
<button className = "search-icon-top" {...getTogglerProps()}>{on ? <img className = "times" onClick = {this.bodyRelative} src = {require('img/times.svg')} alt = " " /> : <i className = "fa fa-search" onClick = {this.bodyFixed}></i>}</button>
<div>
{on ? <TodaySearchBox /> : ''}
</div>
</div>}
</Toggle>
Пока это только начало. Спасибо за ваш вклад.
Обновлено: Я открыт для предложений. Как я уже сказал, я новичок в React.
В чем проблема?