Удаление класса из «непереключенных» элементов и назначение его выбранному элементу в React - PullRequest
Новая
       37

Удаление класса из «непереключенных» элементов и назначение его выбранному элементу в React

0 голосов
/ 23 апреля 2020

Я сделал компонент переключения (точнее, Аккордеон)

Я отображаю массив объектов и перечисляю их как: 

{object.map((o) => (
   <Accordion key={o.id} title={o.question} className="item">
     <div className="text"> { o.answer } <div/>
   </Accordion>
))}

Это выглядит примерно так: 

> Question 1
> Question 2
> Question 3

Теперь, каждый раз, когда я нажимаю на вопрос, он переключается вниз, чтобы показать ответ. Все это прекрасно работает (я использовал зацепки).

Я хочу иметь возможность изменять непрозрачность всех непереключенных элементов в этом списке при открытии ОДНОГО из вопросов.

Так что если Я открываю вопрос 2, он становится «текущим элементом», а непрозрачность вопроса 2 и его ответ должны составлять 100%, а все остальные (вопрос 1 и вопрос 3) должны уменьшаться или уменьшать непрозрачность на 50%. Я могу сделать это с помощью : hover, используя css, но это работает только при наведении.

В принципе, я должен иметь возможность выбрать элемент и удалить базовый класс из всех других элементов, кроме выбранного. Я не знаю, как это сделать на самом деле. Помогите. Я чувствую, что упускаю что-то очевидное. 

const Accordion = ({ title, children, opened = false }) => {
  const [show, setShow] = useState(opened);
  const rotation = classnames('icon', {
    'rotate': show,
  });
  const content = classnames('contents', {
    'closed': !show,
  });

  useEffect(() => {
    setShow(opened);
  }, [opened]);

  const toggle = useCallback(() => {
    setShow(!show);
  }, [show]);

  return (
      <div className='titleContainer' onClick={toggle}>
        <div className={rotations}>
          <i className='icon' />
        </div>
        <h5 className='title'>{title}</h5>
      </div>
      <div className={content}>{children}</div>
  );
};

1 Ответ

1 голос
/ 23 апреля 2020

Я, наконец, понимаю, что вы имеете в виду, я думаю, что это ответ: 

const questionColor = (questionIndex, activeQuestion) => {
    if (activeQuestion !== null && activeQuestion !== questionIndex) {
      return "rgba(0,0,0,0.1)";
    } else return "rgba(0,0,0,1)";
  };

Рабочее решение здесь: https://codesandbox.io/s/cocky-hellman-fxrmc

...