面试题：React中如何实现鼠标悬停显示额外信息的交互

Question

在React应用里，要求实现一个功能，当鼠标悬停在一个按钮上时，在按钮旁边显示一段额外的提示信息，鼠标移开则提示信息消失。请描述实现思路，并给出关键代码示例。

Answer 1

实现思路

1. 在React组件中，使用useState钩子来管理提示信息的显示状态。
2. 为按钮添加onMouseEnter和onMouseLeave事件处理函数，分别用于显示和隐藏提示信息。
3. 根据提示信息的显示状态，决定是否渲染提示信息元素，并通过CSS样式控制其位置在按钮旁边。

关键代码示例

import React, { useState } from 'react';

const ButtonWithTooltip = () => {
    const [isTooltipVisible, setIsTooltipVisible] = useState(false);

    const handleMouseEnter = () => {
        setIsTooltipVisible(true);
    };

    const handleMouseLeave = () => {
        setIsTooltipVisible(false);
    };

    return (
        <div style={{ position: 'relative' }}>
            <button
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                按钮
            </button>
            {isTooltipVisible && (
                <div
                    style={{
                        position: 'absolute',
                        left: '100%',
                        top: 0,
                        backgroundColor: 'lightgray',
                        padding: '5px',
                        borderRadius: '3px'
                    }}
                >
                    这是一段提示信息
                </div>
            )}
        </div>
    );
};

export default ButtonWithTooltip;