react-flip-toolkit и изменение даты, обработчик клика

Пишу проект на реакте, использую react-flip-toolkit
За основу взял этот пример https://codesandbox.io/s/wnnxl223n8
Добавил лейбл и инпут

const ExpandedListItem = ({ index, onClick }) => {
  return (
    <Flipped
      flipId={createCardFlipId(index)}
      stagger="card"
      onStart={el => {
        setTimeout(() => {
          el.classList.add("animated-in");
        }, 400);
      }}
    >
      <div className="expandedListItem" onClick={() => onClick(index)}>
        <Flipped inverseFlipId={createCardFlipId(index)}>
          <div className="expandedListItemContent">
            <Flipped
              flipId={`avatar-${index}`}
              stagger="card-content"
              delayUntil={createCardFlipId(index)}
            >
              <div className="avatar avatarExpanded" />
            </Flipped>
            <div className="description">
              {listData.slice(0, 3).map(i => (
                <Flipped
                  flipId={`description-${index}-${i}`}
                  stagger="card-content"
                  delayUntil={createCardFlipId(index)}
                >
                  <div />
                </Flipped>
              ))}
            </div>
            <div className="additional-content">
              {listData.slice(0, 3).map(i => (
                <div> 
                  <label for="bday">Дата начала планируемых суток:</label>
                  <input type="date"></input>
                </div>
              ))}
            </div>
          </div>
        </Flipped>
      </div>
    </Flipped>
  );
};

Но на клик по дате, у меня сворачивается список, далее собирался использовать textarea и button ещё. Может быть кто-нибудь знает как это можно поправить? Возможность сворачивания мне нужна, но не тогда, когда редактируют даты или нажимают на кнопки.


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