なぜrefボタンが3回クリックされるのですか？

Question

私は非常に単純なコンポーネントに反応している：あなたは、ボタン「の両方をクリックして」「1クリック」し、プログラム的にクリックされるボタン「2をクリックしてください」をクリックすると

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 

でなければなりません。しかし、私は、たとえば、_clickBothの行のいずれかを削除this.refs.button2.click();を削除した場合、それが正しくbehaiveと1つしか表示されません

1 
2 
1 
2 
1 
2 

：奇妙なことは、私は6つのアラートが表示されます、です警告：

1 

あなたが見ると、ここでプロジェクトを試すことができます：https://github.com/js-demos/react-ref-demo

Answer 1

何が間違っているのかは分かりませんが、その背後にある技術を見つけたいと思っています。また

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

Answer 2

で何が起こっているのかわからないが、私：ところで

は、あなたは、あなたがボタンをラップすることができ、それを修正する方法を探しているなら、このように、 setTimeout内をクリックします _clickBothハンドラにはconsole.logを追加し、次の結果得た：

click both 
click both 
click both 
1 
2 
1 
click both 
click both 
2 
1 
2