我正在尝试使用新的默认(从16.8开始)synthax学习钩子和事件处理。我已经知道如何通过单击按钮来更改状态,并通过单击来使用它来使菜单扩展,但是当到达某个位置时,如何更改此彩色状态?
...
function Demo() {
const [coloured, setColoured] = useState(true);
return (
<Navbar className="navbar" style={{backgroundColor: coloured? 'red' : 'black'}}>
<NavbarBrand href="/">Navbar</NavbarBrand>
<Nav className='mr-auto' navbar>
<NavItem>
<NavLink href="/" className="active">Item1</NavLink>
</NavItem>
<NavItem>
<NavLink href="/">Item2</NavLink>
</NavItem>
</Nav>
</Navbar>
)
}
export default Demo;
答案 0 :(得分:1)
您可以使用window.addEventListener('scroll', this.handleScroll, { passive: true })
收听滚动位置更改。
检查一下我为您准备的示例: https://codesandbox.io/s/semantic-ui-react-responsive-navbar-2lq7v
当滚动位置大于200时,它将更改导航栏的颜色。