Question

我正在使用this工具提示来显示一些信息。单击其中一个选项时，我想显示下一个工具提示。图书馆作者设置这种转换的方式是通过ref s，在这种情况下，当它们是字符串文字时，refs运行良好。但是，在React16 +中不推荐使用字符串文字。

解决方法是使用createRef，我这样做了。它适用于第一个弹出窗口，但在转换时失败，因为this引用它所使用的直接对象。

以下是我编写的代码。如何更改它以使this引用正确的对象？

//Constructor
constructor() {
 super();
 this.firstToolTip= React.createRef();
 this.secondToolTip = React.createRef();
}
//Body of render method
<PopoverTooltip
   ref={this.firstToolTip}
   buttonComponent={button}
   items={[
     {
       label: 'Some text for the tootip',
       onPress: () => {                     
         this.refs[this.secondToolTip].toggle();
       }
     }
   ]}
/>

<PopoverTooltip
   ref={this.secondToolTip}
   buttonComponent={button}
   items={[
     {
       label: 'Some text for the tootip',
       onPress: () => {}
     }
   ]}
/>

我理解，正如我在此处读到的其他帖子所述，我可以绑定this但createRef会返回undefined，因此这是不可能的。

Answer 1

尝试像这样绑定click函数。

//Constructor
constructor() {
  super();
  this.firstToolTip= React.createRef();
  this.secondToolTip = React.createRef();
  this.clickOnFirstTooltip=this.clickOnFirstTooltip.bind(this);
}
 //Added func
 clickOnFirstTooltip(){
   // ref.current to acccesss the tooltip 
   this.secondToolTip.current.toggle();
 }
//Body of render method
<PopoverTooltip
  ref={this.firstToolTip}
  buttonComponent={button}
  items={[
    {
   label: 'Some text for the tootip',
    onPress:this.clickOnFirstTooltip
   }
  ]}
/>

<PopoverTooltip
  ref={this.secondToolTip}
  buttonComponent={button}
  items={[
    {
      label: 'Some text for the tootip',
      onPress: () => {}
     }
   ]}
  />

跨对象保持此上下文

1 个答案: