如何在一个元素中添加类并从其余元素中删除

时间:2019-07-09 03:21:46

标签: reactjs react-dom react-state-management

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的{​​{1}} div中,并从其他li中删除divs

事实上,更换收音机后,我没有在li函数中看到console.log()。

1 个答案:

答案 0 :(得分:1)

您根本不打setSlideActive。您需要括号。确保您这样称呼它:

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

如果要访问发出的事件,可以像这样传递它:

onChange={this.setSlideActive}

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