当我在ReactJS上滚动时，我怎么能改变状态呢？

Question

我想在滚动时改变状态。在这里，背景的默认值为false。我希望当滚动页面时，值将为true，然后使用三元操作符动态地更改className。但它不起作用。请给我一个使用onScoll方法的解决方案，当滚动页面时，背景状态将被改变。

const Header = () => {

    const [background, setBackground] = useState(false)




    return (
        <div onScroll={() => setBackground(true)} >
            <div >
   
                <div className={background ?
                 'nav bg-error w-[90%] py-5 mx-auto text-[white] flex justify-between ' 
                :
                 'nav w-[90%]  py-5 mx-auto text-[white] flex justify-between'}>
                    <div>
                        <p> logo</p>
                    </div>
                    <div>
                        <ul className='flex justify-around'>
                            <li>item1</li>
                            <li className='mx-10'>item2</li>
                            <li className='mr-10'>item3</li>
                            <li>item4</li>
                        </ul>
                    </div>
                </div>
                

            </div>
            <div className=' text-[white]'>
                <img src="https://img.freepik.com/free-photo/close-up-islamic-new-year-concept_23-2148611670.jpg?w=1380&t=st=1655822165~exp=1655822765~hmac=c5954765a3375adc1b56f2896de7ea8a604cd1fb725e53770c7ecd8a05821a60" alt="" />
            </div>
        </div>
    );
};

export default Header;

Answer 1

这是因为您需要将overflow:scroll设置为div。否则，onScroll支柱将无法工作。

但请记住，使用上面的解决方案将呈现多余的滚动条。所以你可以试一试：

  const [background, setBackground] = React.useState(false);

  React.useEffect(() => {
    window.addEventListener("scroll", (e) => setBackground(true));

    return () => {
      window.removeEventListener("scroll", (e) => setBackground(false));
    };
  }, [background]);