Как добавить класс к одному элементу и удалить из остальных в реакции - PullRequest
Новая
       15

Как добавить класс к одному элементу и удалить из остальных в реакции

0 голосов
/ 09 июля 2019 
setSlideActive(event) {
  var getID = event.target.id
  console.log(ReactDOM.findDOMNode(this).parentNode.getAttribute("id"))
  var iNum = getID.split("_")[1]
  iNum = --iNum
  this.setState({
    whichSlideActive: parseInt(iNum)
  })
}

generateSlides() {
  var count = 1
  var slideHTML = []
  var slideData = this.state.slideData
  var slideCount = Object.keys(slideData).length //count is 4
  for (var property1 in slideData) {
    slideHTML.push(
      <li key={count} id={"li_count_" + count}>
        <div className={"posRel hidO slideStyle slidenum_" + count} style={{
            backgroundImage: 'url(' + slideData[property1]["img-src"] + ')',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat',
          }}>
            <span>
                {slideData[property1]["text-val"]}
            </span>
        </div>
        <input type="radio" id={"slide_" + count} onChange={(e) => this.setSlideActive} name="slide" checked={this.state.whichSlideActive === 0 ? "checked" : ""} />
        <label htmlFor={"slide_" + count}></label>
      </li>

    )
    count++
    var l = slideHTML
  }

  return slideHTML
}

Как я могу добавить класс в div slideStyle, относящийся к вводу, по которому щелкнули? 

.displayDiv {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

Так что, если щелкнуть радио slide_3, я хочу добавить только вышеКласс slideStyle div в том же li, что и переключатель, и удаление из других li div

На самом деле я не вижу console.log () в *Функция 1012 * при смене радио.

1 Ответ

1 голос
/ 09 июля 2019

Вы вообще не звоните setSlideActive. Вам нужны скобки. Убедитесь, что вы называете это так: 

onChange={() => this.setSlideActive()}

Если вы хотите получить доступ к событию, которое было отправлено, вы можете просто передать его так: 

onChange={this.setSlideActive}

или 

onChange={event => this.setSlideActive(event)}
...