Как добавить стили "выделения" на новый элемент при этом сняв выделение с прошлого элемента?

Question

Есть два окна. Одно отвечает за отображение данных, а второе за работы с ним (удаление, изменения, добавления).

<FirstWindow ></FirstWindow>         
<SecondWindow ></SecondWindow>

Внутри первого окна реализовано добавление "выделения" элемента, по которому был произведен клик. (выделенный элемент может быть только один. Кликнули по другому, с прошлого выделение ушло, добавилось на новый).

const FirstWindow = ({items}) =>{
    const dispatch = useDispatch();
    function getElem(i, item) {       
        setActive(i);  //ЗДЕСЬ       
        dispatch(userInfo(item));     //поиска активного элемента   
    }

    const [active, setActive] = React.useState(null);  
    return(
        <div className = "container">
            {
                items.items.map((item,i) =>{
                    return <FirstWindowItems
                     item = {item}
                     isActive={active===i}
                     onClick={()=>getElem(i,item)}
                     key={item.id}
                     
                     ></FirstWindowItems>
                })
            }            
        </div>
    )
}

Во втором окне есть кнопка добавления нового элемента. Требуется при нажатии на эту кнопку добавить стили выделения к этому элементу и снять выделение с прошлого выделенного. Как это сделать? Я использую redux. Можно реализовать через него?

Answer 1

Пример немного изменен для простоты: В целом как я и писал - все работает.

(возможно в вопросе не указаны детали которые реализованы тут, в таких случаях лучше создать проект в санбоксе где воспроизводится проблема, с минимумом и добавить на него ссылку в самом вопросе, тогда ответ будет более ожидаем)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Load our React component. -->

    <script type="text/babel">
      const FirstWindowItem = ({ item, isActive, onClick}) => {
        return <li
          onClick={() => onClick(item.id, item)}
          style={{ color: isActive? "red": "black" }}
        >
          {item.id}
        </li>;
      };

      const FirstWindow = ({ items }) => {
        const [active, setActive] = React.useState(null);
        //const dispatch = useDispatch();
        function getElem(i, item) {
          setActive(i); //ЗДЕСЬ
          //dispatch(userInfo(item)); //поиска активного элемента
        }
        return (
          <ul className="container">
            {items.items.map((item, i) => {
              return (
                <FirstWindowItem
                  item={item}
                  isActive={active === i}
                  onClick={() => getElem(i, item)}
                  key={item.id}
                ></FirstWindowItem>
              );
            })}
          </ul>
        );
      };

      const App = () => {
        return (
          <ul>
            <FirstWindow items={{ items: [{id: 1}, {id: 2}, {id: 3}, {id: 4}] }} />
          </ul>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

БЛОГ НА HUSL

Как добавить стили "выделения" на новый элемент при этом сняв выделение с прошлого элемента?

Ответы (1 шт):