为什么单击ref按钮3次？

Question

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

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

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

同时，如果您正在寻找修复它的方法，您可以将按钮的 click 包裹在里面setTimeout，如下所示：

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