Как динамически добавлять и удалять класс по клику с помощью React? - PullRequest
Новая
       18

Как динамически добавлять и удалять класс по клику с помощью React?

0 голосов
/ 25 февраля 2019

У меня есть список ссылок.

Я добавляю класс по клику, который называется "is-active".В то же время я хотел бы удалить все существующие "is-active", кроме ссылки, на которую я нажал.Может быть только один элемент с классом «is-active», поскольку он будет «живой» страницей.(Используя bulma css)

Вот код, который я пробовал до сих пор.Это добавляет классы, но не удаляет их. 

    class Menu extends Component {

        constructor(props) {
            super(props);
            this.state = {addClass: false}
          };

          handleClick(e) {
            if(e.target.class === 'is-active'){
              e.target.className = '';
              console.log('remove')
            }else{
              e.target.className = 'is-active';
              console.log('add class')
            }
          }  

    render() {

                        <ul className="menu-list">
                        { this.props.getList.map(list =>
                             <Link onClick={this.handleClick.bind(this)} key={list.id} to="">{list.title}</Link>                    
                            )}
                        </ul>

    }

    }
export default SideMenu;

Совет был бы очень ценным.Я изучаю React только около недели и люблю его до сих пор.

Приветствия

Ответы [ 3 ]

0 голосов
/ 25 февраля 2019

Вы должны избегать касания DOM самостоятельно, давайте сделаем это за вас.

Вы хотите сохранить сигнал в состоянии, сообщающем, активен ли элемент в списке, и использоватьэтот сигнал, чтобы установить класс или нет в вашей фазе рендеринга: 

state = {
  activeId: null  // nothing selected by default, but this is up to you...
}

handleClick(event, id) {
  this.setState({ activeId: id })
}

render() {
  <ul className="menu-list">
  {
    this.props.getList.map(list =>
      <Link key={ list.id }
            className={ this.state.activeId === list.id && 'is-active' }
            onClick={ this.handleClick.bind(this, list.id) } 
            to="">
        { list.title }
      </Link>                    
    )
  }
  </ul>
}

Таким образом, на каждом render, id каждого элемента в вашей getList опоре сравнивается с тем, который высохраняйте в своем состоянии, затем:

  1. если это активный идентификатор, ему присваивается класс 'is-active';
  2. , если он не активный, он очищает предыдущий className (в случае, если он был "активен";

Надеюсь, это поможет:)

0 голосов
/ 25 февраля 2019

Если вы используете реагирующее маршрутизатор для обработки навигации в вашем приложении, вы можете использовать компонент NavLink, который принимает опору для добавления класса, когда URL совпадает.<NavLink to="yourPath" activeClassName="is-active">Home<NavLink>

0 голосов
/ 25 февраля 2019

Если вы используете React , избегайте манипуляций с DOM напрямую .Единственное, что вы изменяете, должно быть состоянием, пусть React работает с DOM.

Для изменения имен классов я бы порекомендовал библиотеку с именем classnames (https://github.com/JedWatson/classnames).. Она будет занимать только 588 байт в вашем размере пакета).

Если вы не хотите использовать стороннюю библиотеку, используйте для этого литералы шаблонов JavaScript.

Пример: 

<div className={ `list-item ${this.state.active ? "active" : ""}` }>...</div>
...