0

Не получается реализовать такую логику - нужно навешивать элементу класс со свойством pointer-events: none; на 1.5 секунды после изменения state.

import ball from './img/ball.png';

export default class Test extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      position: 0
    }
  }
  
  changePosition = () => {
    this.setState({
      position: ++this.state.position
    })
    
    setTimeout(()=>{
      
    }, 1500)
    
    
  }
  
  render() {
    let boxStyle = styles.box;
    let pointerEvent = ` ${styles.box_inactive}`;
    
    if (this.state.position === 1) {
      boxStyle += pointerEvent; // это мне нужно засунуть в setTimeout , но,  как я понял нельзя это делать внутри render (я про setTimeout), но где тогда это можно сделать? нужно повесить класс на 1.5 секунды и снять его
    }
    
    
    return(
      <div className={boxStyle}>
        <img className={styles.ball} onClick={this.changePosition} src={ball}/>
      </div>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 ответ 1

0

Решил вопрос добавлением еще одного свойства состояния

this.state = {
    deerPosition: 0,
    isClickable: true
};


setTimeout(() => {
   this.setState({
     isClickable: true
  })
}, 1600);

ну и отрывок простой логики

if (!this.state.isClickable) {
    boxStyle += pointerEvent;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.