ReactJS：如何避免Navbar中Link组件内的Select触发页面跳转

问题根源是事件冒泡：React Router的<Link>组件会监听点击事件，当你在它内部的<Select>上操作（比如点击选项展开菜单、选择选项）时，点击事件会向上冒泡到外层的<Link>，从而触发路由跳转。

下面提供两种可行的解决方法：

方案一：阻止事件冒泡 #

在BaseCurrencySelect组件的最外层容器上添加点击事件处理，阻止事件向上冒泡到<Link>，这样操作Select时就不会触发跳转：

export default function BaseCurrencySelect(props) {
    const [baseCurrency, setBaseCurrency] = React.useState(props.baseCurrency);

    const handleChange = (event) => {
        let selectedCurrency = CurrencyUtils.getCurrencyFromId(event.target.value)
        setBaseCurrency(selectedCurrency);
        props.stateChanger(selectedCurrency);
    };

    return (
        <Box 
            className="MuiSelect-box" 
            sx={{minWidth: 50}}
            onClick={(e) => e.stopPropagation()} // 阻止事件冒泡
        >
            <FormControl fullWidth>
                <Select
                    className="MuiSelect-select"
                    labelId="currency-select-label"
                    id="currency-select"
                    value={baseCurrency.id}
                    onChange={handleChange}
                >
                    <MenuItem value={CurrencyUtils.currencies.EUR.id}>EUR</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.USD.id}>USD</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.BTC.id}>BTC</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.ETH.id}>ETH</MenuItem>
                </Select>
            </FormControl>
        </Box>
    );
}

也可以在handleChange函数中同时阻止冒泡，但这种方式只能覆盖选择选项时的事件，无法阻止点击Select展开菜单时的冒泡，因此推荐在容器上添加阻止逻辑。

方案二：重构Navbar结构（推荐） #

从语义和代码维护角度，货币选择器本身不属于首页跳转的触发元素，直接将<BaseCurrencySelect>移到<Link>外面，从结构上彻底避免事件冲突：

const Navbar = (props) => {
    return (
        <div className='navbar'>
            {/* 仅将需要跳转的logo和标题包裹在Link内 */}
            <Link to='/'>
                <img src={logo} className="App-logo" alt="App Name"/>
                <h1 className='app_name'>My App Name</h1>
            </Link>
            {/* Select独立于Link存在 */}
            <BaseCurrencySelect baseCurrency={props.baseCurrency} stateChanger={props.stateChanger}/>
        </div>
    )
}

这种方式更符合页面逻辑，代码结构更清晰，也不会有事件冒泡的潜在问题，是更优的解决方案。

内容的提问来源于stack exchange，提问作者matdev