使用 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>)}