按钮内容阻止单击按钮的能力
Button content blocks ability to click the button
我正在使用 material-ui 中的按钮开发一个 React 应用程序。我希望能够拖放包含按钮的组件。对于拖放功能,我使用的是 react-sortable-hoc。当按钮中没有内容时,按钮可以正常工作,但是当按钮包含任何内容(例如下面代码中的图标)时,将在按钮上呈现一个不允许您单击该按钮的按钮。但是,可以单击 的边缘上方或下方的按钮,并且按钮会注册它已被单击。我无法确定为什么图标会阻止按钮注册它被单击的事实。
这是 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>
);
});
如果您能给我任何帮助,我们将不胜感激。
这是一个老问题,但有些人,比如我,仍然看到这个问题,可能想阅读这个:https://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004
问题是 sortable-hoc 吞噬了 onClick 事件。但是我们可以通过设置 pressDelay
或 distance
.
来解决问题
对我来说,最好的选择是为可排序列表设置最小距离,效果很好
You can also use the distance prop to set a minimum distance to be dragged before sorting is triggered (for instance, you could set a distance of 1px like so: distance={1})
所以对于你的情况,我们可以使用
来解决这个问题
...
<div>
<SortableItem
key={identifier}
index={index}
currentIndex={index}
handleButtonClick={handleButtonClick}
distance={1}
/>
</div>
...
我正在使用 material-ui 中的按钮开发一个 React 应用程序。我希望能够拖放包含按钮的组件。对于拖放功能,我使用的是 react-sortable-hoc。当按钮中没有内容时,按钮可以正常工作,但是当按钮包含任何内容(例如下面代码中的图标)时,将在按钮上呈现一个不允许您单击该按钮的按钮。但是,可以单击 的边缘上方或下方的按钮,并且按钮会注册它已被单击。我无法确定为什么图标会阻止按钮注册它被单击的事实。
这是 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>
);
});
如果您能给我任何帮助,我们将不胜感激。
这是一个老问题,但有些人,比如我,仍然看到这个问题,可能想阅读这个:https://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004
问题是 sortable-hoc 吞噬了 onClick 事件。但是我们可以通过设置 pressDelay
或 distance
.
对我来说,最好的选择是为可排序列表设置最小距离,效果很好
You can also use the distance prop to set a minimum distance to be dragged before sorting is triggered (for instance, you could set a distance of 1px like so: distance={1})
所以对于你的情况,我们可以使用
来解决这个问题 ...
<div>
<SortableItem
key={identifier}
index={index}
currentIndex={index}
handleButtonClick={handleButtonClick}
distance={1}
/>
</div>
...