ReactJS:在导航栏中使用 Select inside Link 组件时如何避免重定向？

Question

我有一个Select内部组件<Link>下面的“导航栏”组件:

const Navbar = (props) => {

    return (
        <Link to='/'>
            <div className='navbar'>

                <img src={logo} className="App-logo" alt="App Name"/>
                <h1 className='app_name'>My App Name</h1>
                <BaseCurrencySelect baseCurrency={props.baseCurrency} stateChanger={props.stateChanger}/>
            </div>
        </Link>
    )
}

这是我的BaseCurrencySelect组件:

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

问题是当用户从Select中选择一个项目时组件，它的行为就像用户单击了 Link在导航栏内，因此将用户重定向到 Link的to Prop ，即“/”。

相反，我希望用户在与 Select 交互后留在当前路线上组件，并且只调用stateChanger .

如何实现这个？

Answer 1

您不应将交互式 DOM 元素嵌套在其他交互式 DOM 元素中。您可以通过停止在 select 元素中传播点击事件来解决此问题，即防止事件冒泡到链接元素，但这仍然会导致糟糕的 UI .

如果您只需要在 Navbar 中呈现 BaseCurrencySelect 组件以及链接，那么一个简单的解决方案是取消嵌套 BaseCurrencySelect 并将其呈现为任何链接的同级组件。

示例:

const Navbar = ({ baseCurrency, stateChanger }) => {
  return (
    <div className='navbar'>
      <Link to='/'>
        <img src={logo} className="App-logo" alt="App Name" />
        <h1 className='app_name'>My App Name</h1>
      </Link>

      <BaseCurrencySelect
        baseCurrency={baseCurrency}
        stateChanger={stateChanger}
      />            
    </div>
  );
};