Tại sao nút ref sẽ được nhấp 3 lần?

Question

Tôi có một rất đơn giản phản ứng thành phần:

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; 

Khi bạn bấm vào "Click cả" nút, các "Click 1" và "Click 2" sẽ được bấm programatically. Điều kỳ lạ là, tôi sẽ thấy 6 cảnh báo:

1 
2 
1 
2 
1 
2 

nào nên

1 
2 

Nhưng nếu tôi loại bỏ một trong hai dòng _clickBoth, nói rằng, loại bỏ this.refs.button2.click();, nó sẽ behaive một cách chính xác và chỉ hiển thị một cảnh báo:

1 

Bạn có thể xem và thử dự án ở đây: https://github.com/js-demos/react-ref-demo

Answer 1

Tôi không chắc chắn những gì sai, nhưng tôi chắc chắn muốn tìm hiểu các technicalities đằng sau nó.

Trong khi đó, nếu bạn đang tìm kiếm một cách để sửa chữa nó, bạn có thể quấn các nút nhấp vào bên setTimeout, như thế này:

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

Answer 2

Cũng không chắc chắn những gì đang xảy ra, nhưng tôi đã thêm một console.log vào trình xử lý _clickBoth và nhận được kết quả sau:

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