按钮内容阻止点击按钮的能力答案

【问题标题】：Button content blocks ability to click the button按钮内容阻止点击按钮的能力
【发布时间】：2018-08-23 19:56:46
【问题描述】：

我正在使用 Material-ui 中的 Button 构建一个反应应用程序。我希望能够拖放包含按钮的组件。对于拖放功能，我使用的是 react-sortable-hoc。当按钮中没有内容时，按钮可以正常工作，但是当按钮包含任何内容时，例如下面代码中的图标，a 会呈现在不允许您单击按钮的按钮上。但是，可以单击边缘上方或下方的按钮，并且该按钮会记录它已被单击。我无法确定为什么图标会阻止按钮注册它被点击的事实。

这是 ComponentContainingButton 中按钮的代码。

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

这里是渲染 ComponentContainingButton 的代码。

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>
  );
});

您能给我的任何帮助将不胜感激。

【问题讨论】：

标签： reactjs material-ui react-sortable-hoc

【解决方案1】：

这是一个老问题，但像我这样仍然看到这个问题的人可能想阅读这个：https://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004

问题是 sortable-hoc 会吞噬 onClick 事件。但我们可以通过设置pressDelay 或distance 来解决问题。

对我来说，最好的选择是为可排序列表设置最小距离，效果很好

您还可以使用 distance 属性设置触发排序之前要拖动的最小距离（例如，您可以设置 1px 的距离，如下所示：distance={1}）

所以在你的情况下，我们可以通过使用来解决这个问题

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

【讨论】：