Chú giải công cụ khởi động không hoạt động với react.js

Question

Tôi đã cố gắng sử dụng chú giải công cụ khởi động trên nút để hiển thị thông tin đầy đủ. Nhưng nó không hoạt động. Chú giải công cụ không được hiển thị.

Sau đây là tôi phản ứng mã:

<button type="button" ref="data" value={this.props.data} onClick={this.submit} className="btn btn-default btn-block" data-toggle="tooltip" data-placement="top" title={ this.props.data }> 
{ this.props.data.length > 20 ? 
this.props.data.substring(0, 20)+'...' : this.props.data } 
</button> 

Tôi thậm chí còn cố gắng đưa nó sử dụng phương pháp javascript bootstrap của như:

<script> 
$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 
</script> 

Tôi nên làm gì cho nó? Cảm ơn bạn ..

Answer 1

Tôi chỉ có thể đoán mà không có bản demo mà bạn đang gọi .tooltip trên tài liệu đã sẵn sàng, nhưng trước khi thành phần thực sự hiển thị.

Hãy thử:

componentDidMount: function() { 
    this.attachTooltip(); 
}, 

componentDidUpdate: function() { 
    this.attachTooltip(); 
}, 

attachTooltip: function() { 
    $(this.refs.data).tooltip(); 
    // Or for React <0.14 - 
    // $(this.refs.data.getDOMNode()).tooltip(); 
} 

PS xem xét cho nút của bạn ref một tên có ý nghĩa hơn 'dữ liệu'