DOM className属性在setTimeout（）中不起作用

Question

我正在尝试创建一个可渲染“钉”的反应组件：

或“ nopeg”（只是一个没有钉的空白）。只需更改钉组件的类即可完成。我还有另一个目的。如果单击钉，并且其类别为“ nopeg”，则我想立即将“钉”更改为“ peg”类，然后等待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使用合成事件。如本文档的event pooling部分中所述，这些事件被重用，因此您以后不能从异步代码（例如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)
}

通过event.target：

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

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