使用 javascript 替換類在 reactjs 中不起作用

Question

我想更改單擊功能上的動態元素類，因為我嘗試了以下解決方案，但這些都不起作用

  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>

Answer 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>)}