Phản ứng sự kiện onClick trên thành phần

Question

Tôi có thành phần React được gọi là <SensorList /> có nhiều con <SensorItem /> s (một thành phần React khác). Tôi muốn có thể tuyên bố sự kiện onClick trên mỗi <SensorItem /> từ trong vòng <SensorList />. Tôi đã thử làm như sau:

sensorSelected: function(sensor) { 
    console.log('Clicked!'); 
}, 

render: function() { 
    var nodes = this.state.sensors.map(function(sensor) { 
     return (
      <SensorItem onClick={ this.sensorSelected } /> 
     ); 
    }.bind(this)); 

    return (
     <div className="sensor-list"> 
      { nodes } 
     </div> 
    ); 
} 

Không cần phải nói, tôi không nhận được bất kỳ "Đã nhấp!" sắp tới trong bảng điều khiển của tôi. Thanh tra React trong Chrome cho biết rằng sự kiện onClick đã được đăng ký, với nội dung chức năng ở trên.

Tôi kết luận, do đó, tôi không thể đăng ký onClick sự kiện trên các thẻ <SensorItem /> thực tế (tôi không chắc chắn tại sao điều này lại xảy ra). Làm thế nào để tôi đi về việc đạt được điều này nếu không?

Answer 1

Điều này phụ thuộc vào định nghĩa thành phần SensorItem của bạn. Vì SensorItem không phải là một phần tử DOM nguyên bản nhưng, như bạn đã nói, một thành phần React khác, onClick như được định nghĩa ở đây chỉ đơn giản là thuộc tính của thành phần đó. Những gì bạn cần làm là, bên trong của thành phần SensorItem vượt qua các onClick prop cho một sự kiện onClick của thành phần DOM:

var SensorItem = React.createClass({ 
    render: function() { 
    return (
     <div className="SensorItem" onClick={this.props.onClick}> 
     ... 
     </div> 
    ); 
    } 
});