-1

我试图从动态创建的 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
}

如何在不使用 this 的情况下获取 tootipMsg 函数中的特定元素，或者“this”引用是否有任何替代方法，它应该引用特定元素。

如果它是静态元素，我可以使用“ref” https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute 但在我的情况下，ref 是动态的。

提前致谢。

4

2 回答 2

0

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

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

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

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

混合使用 jQuery 和 react 来读取 DOM（或者更糟糕的是操作 DOM）通常不是一个好主意。

更新：所以有两种可能的解决方法：

一个。React-only 解决方案（没有 jQuery，没有 Bootstrap） 在 react 中，如果不需要，最好避免使用 refs。看起来你不需要它们。

您可以将变量绑定到toolTipMsg(), 并使用它。并在工具提示的父级上设置一个 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 没有任何好处）

湾。或者：仅使用 Bootstrap 和 jQuery（无反应） Bootstrap 工具提示会触发您可以收听的自己的事件。（此处的文档）。

在您的代码中，您会在某处：

$('#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"));
}
于 2015-10-30T15:22:57.797 回答
0

我找到了一个基于@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>
});
于 2015-11-02T12:44:06.177 回答