Свойство DOM className не работает в setTimeout ()

Question

Я пытаюсь создать компонент реагирования, который может отображать либо «колышек»:

, либо «nopeg» (который является просто пробелом без колышка).Это делается просто путем изменения класса компонента Peg.У меня также есть другая цель.Если щелкнуть колышек и его класс «nopeg», то я хочу немедленно поменять колышек на класс «колышек», затем подождать 1 секунду, а затем изменить его обратно на «nopeg».Это делается с помощью React.js:

class Peg extends React.Component {
  constructor(props) {
    super(props);

    this.handleDrop = this.handleDrop.bind(this);
  }

  handleDrop(event) {

    if (event.target.className == 'nopeg') {
      event.target.className = 'peg'

      setTimeout((e) => {
        e.target.className = 'nopeg'
      }, 1000, event)
    }
  }

  render() {
    const classdef = this.props.class;
    const iddef = this.props.id;
    return <div id={iddef} class={classdef} onClick={this.handleDrop}></div>
  }
}

. Как видите, функция setTimeout обрабатывает ожидание, вводя объект события, ожидая 1 секунду, а затем изменяя имя класса.По какой-то причине это не работает, и я могу изменить только колышек на «nopeg».

Answer 1

React использует синтетические события.Как описано в разделе документации документации, эти события используются повторно, поэтому вы не сможете получить к ним доступ позже из асинхронного кода (например, обратного вызова setTimeout).Если вы хотите передать его на setTimeout, вам сначала нужно будет вызвать event.persist(), либо вместо этого передать значение event.target:

с event.persist():

if (event.target.className == 'nopeg') {
  event.target.className = 'peg'
  event.persist()

  setTimeout((e) => {
    e.target.className = 'nopeg'
  }, 1000, event)
}

Passing event.target:

if (event.target.className == 'nopeg') {
  event.target.className = 'peg'

  setTimeout((t) => {
    t.className = 'nopeg'
  }, 1000, event.target)
}