Контент кнопки блокирует возможность нажатия на кнопку

Question

Я создаю приложение реакции, используя кнопку из Material-UI. Я хочу иметь возможность перетаскивать компонент, содержащий кнопку. Для способности перетаскивания я использую реагирующую сортировку-hoc. Кнопка работает правильно, если в кнопке нет содержимого, но когда кнопка содержит что-либо, например значок в коде ниже, над кнопкой отображается кнопка, которая не позволяет нажать кнопку. Тем не менее, можно нажать кнопку выше или ниже края и кнопка регистрирует, что она была нажата. Я не могу определить, почему значок не позволяет кнопке регистрировать тот факт, что на нее нажимают.

Вот код для кнопки, которая находится в ComponentContainedButton.

<FormControl>
  <Button onClick={e => handleButtonClick(e, currentIndex)}>
    <DeleteIcon />
  </Button>
</FormControl>

А вот код, который выполняет визуализацию ComponentConistingButton.

const SortableItem = SortableElement((props) => {
  const {
    handleButtonClick
    currentIndex,
  } = props;

  return (
    <div className="box">
      <TravelSingleLeg
        handleButtonClick={handleButtonClick}
        currentIndex={currentIndex}
      />
    </div>
  );
});

const SortableList = SortableContainer((props) => {
  const {
    items,
    handleButtonClick
  } = props;

  return (
    <div>
      {items.map((value, index) => {
        const identifier = `item-${index}`;

        return (
          <div>
            <SortableItem
              key={identifier}
              index={index}
              currentIndex={index}
              handleButtonClick={handleButtonClick}
            />
          </div>
        );
      })}
    </div>
  );
});

Буду очень признателен за любую помощь

Answer 1

Это старый вопрос, но некоторые люди, такие как я, которые все еще видят эту проблему, возможно, захотят прочитать это: https://github.com/clauderic/react-sortable-hoc/issues/111

Проблема в том, что сортируемые события проглатывают события onClick. Но мы можем иметь обходные пути, установив pressDelay или же distance,

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

Вы также можете использовать опору расстояния, чтобы установить минимальное расстояние, которое будет перетаскиваться до запуска сортировки (например, вы можете установить расстояние в 1 пиксель, например, так: distance={1})

Так что в вашем случае мы можем исправить это с помощью

      ...
      <div>
        <SortableItem
          key={identifier}
          index={index}
          currentIndex={index}
          handleButtonClick={handleButtonClick}
          distance={1}
        />
      </div>
      ...