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

我正在尝试创建一个react组件，它可以呈现“peg”：

或者一个“nopeg”（这只是一个没有peg的空白）。这只需更改Peg组件的类即可完成。我还有另一个目的。如果点击了peg，其类为“nopeg”，那么我想立即将peg更改为“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>
  }
}

class.Component{
建造师（道具）{
超级（道具）；
this.handleDrop=this.handleDrop.bind（this）；
}
handleDrop（事件）{
如果（event.target.className=='nopeg'）{
event.target.className='peg'
设置超时（（e）=>{
e、 target.className='nopeg'
}，1000，事件）
}
}
render（）{
const classdef=this.props.class；
const iddef=this.props.id；
返回
}
}

---

如您所见，

setTimeout

函数通过输入事件对象，等待1秒，然后更改类名来处理等待。由于某种原因，这不起作用，我只能将peg更改为“nopeg”。

React使用合成事件。如文档部分所述，这些事件是重复使用的，因此以后不能从异步代码（例如

setTimeout

回调）访问它们。如果要将其传递给

setTimeout

，则需要首先调用

event.persist（）

，或者传递

event.target的值：

带有
事件.持久化（）
：

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

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

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

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

传递
事件。目标
：

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

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

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

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

应该
event.target.className='nopeg'。Not e
否我将事件对象作为第三个参数传递到setTimout函数中。请参阅setTimeout文档：@ThanhNgo@Herohtar我使用的是codepen.io，渲染时没有错误。
e.target.className='nopeg'
只是不例外，您可以共享codepen.io，这有点复杂。在顶部键入
3
，在侧面键入
2
，这样会使销钉变形。单击销钉之间的空格以启动handleClick功能：