javascript - 对鼠标悬停做出反应，获取另一个 div 中的内容

Question

我有这种情况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>
 }
 }

Answer 1

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

见https://jsfiddle.net/nb59bxjk/

一些相关的片段：

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);
    }
}