Почему не работает js DOM в реакте?

Question

[Quintis]

Доброго времени суток , скажите почему нельзя через js DOM забрать все классы с элементов списка ? И как выделять нажатый элемент в реакте ? Только через ref ?

class MyComponent extends Component {
  click=(e)=>{
     document.getElementsByTagName('li').classList.remove("active")

    e.target.className = "active"
  }

  render() {
      return (
          <ul>
              <li onClick={(e)=>this.click(e)}>item1</li>
              <li onClick={(e)=>this.click(e)}>item2</li>
              <li onClick={(e)=>this.click(e)}>item3</li>
          </ul>
      )
  }
}

Answer 1

[abberati]

Такие вещи делаются в реакте не напрямую через работу с домом, а через работу с внутренним состоянием компонента. Читайте документацию, проходите обучающий курс про крестики-нолики.

Comments

[Quintis]

А можете объяснить почему не работает js DOM, что б я знал что ответить на собеседовании

[abberati]

Дочитайте доку до конца, пожалуйста — многие вопросы отпадут.

[Quintis]

abberati, согласно документации использование ref оправдано когда надо выделить текст(кнопку) , это значит что нужно рефы использовать ?

[Quintis]

В отличие от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соответствовал переданным React-элементам -это и есть причина по которой не работает DOM Js ?

[abberati]

Quintis, согласно документации вы должны объявить стейт activeLi, класть туда идентификатор элемента и присваивать класс элементу в соответствии с состоянием. А состояние менять по клику. Читайте документацию про локальный стейт. Рефы нужны, когда необходимо обращаться к методам каких-либо нод.

А ваш код не работает из-за того, что вы обращаетесь к класслисту коллекции нод (у которой нет класслиста). И в в вашей консоли об этом написано.

[Quintis]

abberati, Внимательно прочитал Ваш комментарий и у меня получилось ) Так правильно ?

class MyComponent extends Component {
  state={
    activeLi: ''
  }

  click=(n)=>{
    console.log(12)
    this.setState({
      activeLi:n
    })
  }

  render() {
      return (
          <ul>
              <li onClick={()=>this.click(1)} className={this.state.activeLi === 1 ? "active": ''}>item1</li>
              <li onClick={()=>this.click(2)}  className={this.state.activeLi === 2 ? "active": ''}>item2</li>
              <li onClick={()=>this.click(3)}  className={this.state.activeLi === 3 ? "active": ''}>item3</li>
          </ul>
      )
  }
}

[abberati]

Quintis, начало положено, так правильно. Но в реальном мире было бы неплохо иметь массив элементов списка (массив объектов с id и label), рендерить массив через .map, в стейте хранить id выбранного элемента.

[Quintis]

abberati, Спасибо, это тренировочный пример , про рендер через map знаю

[Quintis]

abberati, а можете скинуть пример использования refs в реальном мире ,кроме того примера с документации ...

[abberati]

Quintis, погуглите, как делается автофокус инпута в реакте. Вот он на рефах будет.

[abberati]

И отметьте уже решением ответ.

[Quintis]

abberati, Спасибо!