React onmouseover 在另一个 div 中获取内容

Posted 2023-02-22

【中文标题】React onmouseover 在另一个 div 中获取内容

【英文标题】：React on mouseover get content in an other div

【发布时间】：2018-04-21 06:17:56

【问题描述】：

我有这种情况https://jsfiddle.net/ffq1p77m/ 实际上将链接悬停在一个框显示相关内容但它显示在 UL 内的一个框中，我会将内容放在 ul 之外的另一个 div 中，这可能吗？

class Item extends React.Component 

constructor(props) 
super(props);

this.state = 
  isHovered: false,
;


handleEnter() 
this.setState(
  isHovered: true 
);


handleLeave() 
this.setState(
  isHovered: false 
);


render() 
return <div><li><a href="#" onMouseEnter=this.handleEnter.bind(this)
      onMouseLeave=this.handleLeave.bind(this)>
     this.props.name </a>
     this.props.children </li>this.state.isHovered ? (
      <div className="box">this.props.content</div>
    ) : (
      <div />
    )</div>
 
 

【参考方案1】：

这是可能的，但您需要将工具提示状态向上移动到将显示它的组件..

见https://jsfiddle.net/nb59bxjk/

一些相关的sn-ps：

class List extends React.Component 
    constructor() 
        super();

        this.state =  tooltip: null ;
        this.setTooltip = this.setTooltip.bind(this);
    

    setTooltip(tooltip) 
        this.setState( tooltip );
    

    list(data) 
        //...
        return <Item setTooltip=this.setTooltip key= node.key  name= node.label  content=node.content>
    
    //...


class Item extends React.Component 
    // ...
    handleEnter() 
        this.props.setTooltip(this.props.content);