React onClick event

Question

Tôi đang thiếu thứ gì đó. Đây là một thế giới hello rất đơn giản, mục tiêu là chỉ cần kích hoạt một sự kiện cảnh báo onClick. Sự kiện không kích hoạt khi trang tải, nhưng không phải khi tôi nhấp vào nút. Tôi đánh giá cao sự giúp đỡ. Dưới đây là một jsFiddle để làm cho nó dễ dàng hơn để xem: jsFiddle

var Hello = React.createClass({ 
render: function() { 
    return <button onClick={alert("Hello World!")}> 
       Click Me 
      </button>; 
} 
React.render(<Hello />, document.getElementById('container')); 

Answer 1

Tôi nghĩ rằng bạn đang đi về sai này, bởi vì ReactJS chỉ là Javascript Tôi không nghĩ theo cách của bạn bắn sự kiện này sẽ làm việc. OnClick của bạn nên kích hoạt một hàm được gắn vào phần tử React của bạn như vậy.

var Hello = React.createClass({ 
    myClick: function() { 
     alert("Hello World!"); 
    }, 
    render: function() { 
     return <button onClick={this.myClick}> 
        Click Me 
       </button>; 
    } 
}); 

React.render(<Hello />, document.getElementById('container')); 

Answer 2

Bây giờ tôi thấy lý do tôi gặp sự cố trước đây. Vấn đề xảy ra khi tôi đang cố chuyển một đối số cho hàm:

var Hello = React.createClass({ 
    myClick: function (text) { 
     alert(text); 
    }, 
    render: function() { 
     return <button onClick={this.myClick("Hello world")}> 
        Click Me 
       </button>; 
    } 
}); 

Điều này có cùng hành vi như mã gốc.

Answer 3

Nếu chức năng được chạy có thông số, là phải được ràng buộc với chức năng như sau:

var Hello = React.createClass({ 
    handleClick: function (text) { 
     alert(text) 
    }, 

    render: function() { 
     return <button onClick = { 
      this.handleClick.bind(null, "Hello World") 
     } > Click Me < /button>; 
    } 
}); 

React.render(<Hello/> , document.getElementById('container')); 

này có ý nghĩa bây giờ. Một lần nữa xin cảm ơn @ Chris-Hawkes đã chỉ cho tôi đúng hướng.

Answer 4

Lưu ý: đây là một cách khác để làm điều đó nếu bạn muốn một cái gì đó nhanh chóng/inline:

<button onClick={()=>{ alert('alert'); }}>alert</button>