Как в react убрать стиль у div-a в компоненте?

Рейтинг: 0Ответов: 1Опубликовано: 05.04.2023

Нужно убрать стиль {topBegin} у класса .wrapper при нажатии на кнопку. Есть ли такой метод в react по типу removeAttribute в JS?

const Main = () =>  {

    const [photo, setPhoto] = useState("");
    const [result, setResult] = useState([]);
    const [isLoading, setisLoading] = useState(false);

    const changePhoto = () => {

        axios.get(`https://api.unsplash.com/search/photos?per_page=30&client_id=Ip0XA55zY7b7-d19osq1L5btGg-YCeDZVpnnJjXqHxs&query=${photo}`)
            .then((response) => {
                console.log(response.data);
                setResult(response.data.results);
                setisLoading(false);
            })

            // Добавление затемняющего фона
            const foo = document.querySelector('.wrapper-overlay');
            foo.classList.remove('form-focus');
            foo.classList.add('form-overlay')

            // Поднятие форма вверх
            const top = document.querySelector('.back');
            top.classList.add('search-area-top')

            const hideInput = document.querySelector('.form-search-begin');
            hideInput.classList.add('form-search-begin-hide')
            const visibleInput = document.querySelector('.form-search');
            visibleInput.classList.add('form-search-visible')

    }

    const handleClick = e => {
        const foo = document.querySelector('.wrapper-overlay');
        foo.classList.toggle('form-focus');
      };
      
    const topBegin = {
        marginTop: 220
    }

 return (
        <>
        <div className='wrapper' style={topBegin}>
            
         <div className='back'>
            <div className='search-area'>
                
                <input type="search"  placeholder="Телефоны, яблоки, груши..." className='form-control form-search-begin' 
                 value={photo} onChange={(e) => {
                    setPhoto(e.target.value)
                }} />
                <input type="search"   className='form-control form-search' onClick={handleClick} value={photo} onChange={(e) => {
                    setPhoto(e.target.value)
                }} />
                <img src={imgSearch} className="imgSearch" alt="search"/>
                <button type='search' onClick={changePhoto}  className='btn-search '>Искать</button>
                </div>
            </div>

                {isLoading? <Loader/> : 
                
                    <div className="container-gallery">
                        <div className="row">
                            {result.map((value, index) => {
                                return (
                                    <div className="img-result" key={index}>
                                        <div className="img-result-border">
                                            <img className="exmpl exmpl-img" src={value.urls.small} alt='' />
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                        <div className='wrapper-overlay'>
                    </div>
                    </div> 
              
                } 

        </div> 
        </>
    )
}

export default Main
css javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1

Можешь использовать useState в данном случае и не обращаться к селектору, вот пример кода

import React, { useState } from 'react';

function App() {
  const [isStyled, setIsStyled] = useState(false);

  const handleClick = () => {
    setIsStyled(!isStyled);
  };

  return (
    <div>
      <button onClick={handleClick}>
        {isStyled ? 'Remove Style' : 'Add Style'}
      </button>
      <div
        style={{
          backgroundColor: 'lightblue',
          height: '50px',
          width: '50px',
          margin: '20px',
          ...(isStyled && {
            border: '1px solid black',
            borderRadius: '10px',
            boxShadow: '0px 0px 5px 0px black',
          }),
        }}
      />
    </div>
  );
}

export default App;