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 函数中的特定元素，或者是否有替代 "this" 引用的方法，它应该引用特定元素。

如果是静态元素我可以用"ref" https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute 但在我的例子中，ref 是动态的。

提前致谢。

Answer 1

如果我正确理解问题（和评论对话），你想

创建多个工具提示元素
有某种toolTipMsg()函数来读取显示的工具提示的内容

当前设置看起来像一个长往返：

在 react 渲染函数中，使用 jQuery 创建多个工具提示元素，并向每个元素传递一个 HTML 数据名称属性
在 react componentDidMount 中，使用 jQuery 从 DOM 获取工具提示并附加监听器
侦听器触发函数，该函数再次从 DOM 读取以获取工具提示 HTML 数据名称属性。

混合 jQuery 和阅读 DOM 的反应（或者 - 更糟 - 操纵 DOM）通常不是一个好主意。

更新：所以有2条可能的路线可以解决：

一个。仅 React 解决方案（NO jQuery，NO Bootstrap） 在 React 中，如果不需要，最好避免使用 refs。而且看起来你不需要它们。

您可以将变量绑定到 toolTipMsg()，然后使用它。并在工具提示的 parent 上设置 MouseOver 侦听器。

React 风格的代码看起来或多或少像：

// 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 没有任何好处）

b.或者：仅使用 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>
});

ReactJS 中的这个引用

this reference in ReactJS

this

twitter-bootstrap-tooltip

reactjs