使用javascript替换类在reactjs中不起作用答案

【问题标题】：Replace class using javascript is not working in reactjs使用javascript替换类在reactjs中不起作用
【发布时间】：2020-01-08 08:29:46
【问题描述】：

我想更改点击功能上的动态元素类，因为我尝试了以下解决方案，但这些都不起作用

  handleClick=(event,headerText)=>{
     document.getElementsByClassName('sk-reset-filters')[0].className = 'jjjj';
  }


 handleClick=(event,headerText)=>{
   var reset = document.querySelectorAll('.sk-reset-filters.is-disabled')[0];
   console.log(reset)
   if(reset){
     reset.className = 'sk-reset-filters';   
     console.log(reset)   
  }

我只想在点击时删除is-disabled。我也尝试使用 setTimout 函数，但不起作用。有什么问题吗？

当我 console.log(reset) 时，我的 html 越来越低了。

<div class="sk-reset-filters is-disabled">
    <div class="sk-reset-filters__reset">Clear all</div>
</div>

【问题讨论】：

单击按钮时是否调用了单击处理函数？
是的，当我单击元素时会调用 handleclick
getElementsByClassName 或 querySelectorAll 是否返回您要查找的确切元素？
是的，等等，让我将其添加到问题中。 @frogatto 我已经添加了问题
我正在获取该元素的完整 html

标签： javascript reactjs searchkit

【解决方案1】：

您可以通过这种方式处理禁用或显示具有反应状态的 dom 元素：

state={isDisabled:true}  // set a state property

handleClick=(e)=>{
e.preventDefault
this.setState({isDisabled:false}) //change !isDisabled to false when clicked
}

render() {
  {isDisabled} = this.state
  let disabledMarkup = isDisabled ? <div>something</div> : null}
  return (<React.Fragment>{disabledMarkup}
  <button onClick={this.handleClick}></button>
  </React.Fragment>)}

【讨论】：

我不能使用状态，因为这个元素是从 searchkit 动态来的。
在这种情况下你应该使用refs API