我正在使用material-ui中的Button构建一个React应用。我希望能够拖放包含按钮的组件。对于拖放功能,我正在使用react-sortable-hoc。当按钮中没有内容时,该按钮可以正常工作,但是当该按钮包含任何内容(例如下面的代码中的图标)时,将在该按钮上方呈现a,不允许您单击该按钮。但是,可以单击的边缘上方或下方的按钮,并且该按钮会记录已单击的按钮。我无法确定为什么Icon阻止了该按钮记录被单击的事实。
这是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>
);
});
您能给我的任何帮助将不胜感激。
答案 0 :(得分:0)
这是一个古老的问题,但是像我这样仍然看到此问题的某些人可能想要阅读以下内容:https://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004
问题是可排序的吞咽onClick事件。但是我们可以通过设置pressDelay
或distance
来解决。
对我来说,最好的选择是为可排序列表设置最小距离,并且效果很好
您还可以使用距离道具来设置触发排序之前要拖动的最小距离(例如,您可以将距离设置为1px,例如:distance = {1})
因此,在您的情况下,我们可以通过使用
解决此问题 ...
<div>
<SortableItem
key={identifier}
index={index}
currentIndex={index}
handleButtonClick={handleButtonClick}
distance={1}
/>
</div>
...