эта ссылка в ReactJS

Question

Я пытаюсь получить доступ к определенному элементу из DOM, который создается динамически. При наведении на этот элемент я хочу получить доступ к соответствующему элементу. как,

// element creation inside render function 
$.each(profiles, function(i,x){ 
    <span data-name={x.name} rel="tooltip">Name<span> 
}); 

// tooltip initialization in componentDidMount function 
var self = this; 
$('body').tooltip({ 
     selector: '[rel=tooltip]', 
     title: self.tooltipMsg 
}); 

и функция, как,

tooltipMsg: function(element){ 
    return $(this).attr('data-name'); // this code is return undefined, since this refers to ReactClass 
} 

Как я могу получить конкретный элемент внутри функции tootipMsg без использования этого или Есть ли альтернатива для «этого» ссылки, которые должны относится конкретный элемент.

Если это статический элемент, я могу использовать «ref» https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute Но в моем случае ref является динамическим.

Заранее спасибо.

Answer 1

Если я правильно понял вопрос (и комментарии диалога) правильно, вы хотите

• создать несколько элементов всплывающих подсказок
• имеют какие-то toolTipMsg() функции, чтобы прочитать содержание показанного подсказкя

текущая установка выглядит как долго туда и обратно:

• внутри реагировать функции визуализации, использовать JQuery для создания нескольких элементов всплывающих подсказок, и передать каждый атрибут имя-данные HTML
• внутри Реагировать componentDidMount, используйте JQuery для извлечения подсказки из DOM и прикрепить слушателей
функцию
• слушатель пожаров, который читает снова из DOM для извлечения атрибута атрибута имени HTML-подсказки.

Смешивание jQuery и реагирование на чтение DOM (или - хуже - манипулирование DOM), как правило, не очень хорошая идея.

ОБНОВЛЕНИЕ: так что есть 2 возможных пути, чтобы решить:

с. Решение только для реактивов (NO jQuery, NO Bootstrap) Внутри реакции рекомендуется избегать использования ссылок, если они не нужны. И похоже, что они вам не нужны.

Вы можете привязать переменную к toolTipMsg() и использовать ее. И настройте слушателя MouseOver на родительском всплывающей подсказки.

код Реагировать стиль будет выглядеть более или менее, как:

// tooltip element creation inside render function 
// of individual tooltip parent element 
return 
    <div className="alwaysVisibleToolTipParent" 
    onMouseOver={this.toolTipMsg}> 
    <p>someOtherContent</p> 
    <span className="my-awesome-tooltip">{this.props.tooltipname}</span> 
    </div> 
}); 

// no need for componentDidMount: listener covered in initial render 

// the function is much simpler now 
tooltipMsg: function(){ 
    console.log(this.tooltipname); 
} 

Вы должны свернуть свою собственную всплывающую подсказку с укладкой для этого (так, к сожалению, никакой пользы от JQuery)

б. Альтернативно: используйте только Bootstrap и jQuery (НЕТ реагировать) Всплывающая подсказка Bootstrap запускает собственные события, которые вы можете прослушать. (documentation here).

В вашем коде, вы бы где-нибудь:

$('#myToolTipParent').on('shown.bs.tooltip', function() { 
    // 'this' is now the element (parent of the tooltip) 
    tooltipMsg(this); 
}) 

И ваша tooltipMsg() функция будет гласить:

function tooltipMsg(element) { 
    // the text of the tooltip == the title attribute of the parent element of the tooltip 
    console.log(element.getAttribute("title")); 
} 

Answer 2

Я нашел рабочий код, основанный на @wintvelt решения, но проблема в этом решении это всплывающее сообщение не будет отображаться в первый раз, так как заголовок устанавливается только внутри tooltipMsg

//custom function inside createClass 
tooltipMsg: function(disabled_by, dest, event) { 
    $(event.target).attr("data-original-title", disabled_by); 
    .. 
}, 

// tooltip initialization inside componentDidMount 
$('body').tooltip({ 
     selector: '[rel=tooltip]', 
     template: '<div class="tooltip custom_tooltip"><div class="tooltip-arrow custom_tooltip-arrow"></div><div class="tooltip-inner custom_tooltip-inner"></div></div>', 
}); 

// span tag creation inside each in render function 
$.each(profiles, fucntion(i, profile) { 
    var disabled = (profile.disabled) ? <span className="label label-important" data-toggle="tooltip" data-placement="right" onMouseOver={react_obj.tooltipMsg.bind(null,profile.Disabled_by)} rel="tooltip">Disabled</span>) 
      : null 
    <tr> 
     <td> {profile.Name} 
      <br/> 
      {disabled} 
     </td> 
    </tr> 
});