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

对鼠标悬停的反应获取另一个div中的内容

1 个答案: