reactjs - 为什么ref按钮会被点击3次？

Question

我有一个非常简单的 react 组件:

import React, {Component} from 'react';

class Hello extends Component {
  render() {
    return <div>
      <h1>Hello Freewind</h1>
      <div>
        <button ref="button1" onClick={() => alert('1')}>Click 1</button>
        <button ref="button2" onClick={() => alert('2')}>Click 2</button>
      </div>
      <div>
        <button onClick={this._clickBoth.bind(this)}>Click both</button>
      </div>
    </div>;
  }

  _clickBoth() {
    this.refs.button1.click();
    this.refs.button2.click();
  }
}

export default Hello;

当您单击“单击两个”按钮时，将以编程方式单击“单击 1”和“单击 2”按钮。奇怪的是，我会看到 6 个警报:

1
2
1
2
1
2

应该是

1
2

但是，如果我删除 _clickBoth 的任何一行，例如删除 this.refs.button2.click();，它将正确运行并且仅显示一个警报:

1

您可以在此处查看并尝试该项目:https://github.com/js-demos/react-ref-demo

Answer 1

我不确定出了什么问题，但我绝对想找出其背后的技术细节。

同时，如果您正在寻找修复此问题的方法，可以将按钮的点击封装在 setTimeout 中，如下所示:

setTimeout(() => {
  this.refs.button1.click();
  this.refs.button2.click();
}, 0);