Question

这个问题与https://github.com/clauderic/react-sortable-hoc有关。我对React很新，所以我发现以下内容有点恼人。去 https://jsfiddle.net/7tb7jkz5/。注意第4行

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={console.debug(value)}>{value}</li>);

当您运行代码时，控制台将记录＆＃34;项目0＆＃34;到＆＃34;项目99＆＃34;。单击某个项目将记录相同，但三次次。为什么会这样？这真的是必要的还是更像一个bug？

我期望一种类似于普通DOM的行为，因此点击事件会从点击的项目中冒出来，并且可能会在其祖先的过程中被捕获。观察到的行为在我看来，点击事件将由列表向下发送到每个列表项三次。

更新好吧，这实际上和水晶一样清晰，谢谢你指出这一点，Shubham。我不只是指定一个引用，而是实际调用console.debug，每次计算表达式时都会执行。常见的错误。

但是，这意味着，当我点击其中一个时，每个列表项都会渲染（我猜）三次。我怀疑缺少优化甚至无用的重绘。

Answer 1

您需要将onClick操作提及为function。在处理程序调用中使用() =>。尝试下面的方法，虽然响应很慢，但它仍然有效

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={() => console.debug(value)}>{value}</li>);

Answer 2

使用react-sortable-hoc定义和处理点击事件的另一种方法：请检查以下代码

import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';

const SortableItem = SortableElement(({ value }) => {

  return (
    <div >
      <div id="button_value">{value}</div>
    </div >
  );
});



const SortableList = SortableContainer(({ items }) => {
  return (
    <div >
      {items.map((value, index) => (
        <SortableItem
          key={`item-${index}`}
          index={index}
          value={value}
        />
      ))}
    </div>
  );
});


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
    };
  }

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  shouldCancelStart = (e) => {
    var targetEle = e;
    if (!targetEle.id) {
      targetEle = e.target;
    }
    if (targetEle.id === 'button_value') {
      console.log('Div button click here ');
      // perform you click opration here
    }

// you can define multiple click event here using seprate uniq id of html element even you can manage delay on click here also using set timeout and sortmove props and sortend props you need to manage just one boolean flag.


  }

  render() {
    return (
      <div>
        <SortableList
          items={this.state.items}
          onSortEnd={this.onSortEnd}
          onSortStart={(_, event) => event.preventDefault()}
          shouldCancelStart={this.shouldCancelStart} />
      </div>
    );
  }
}

export default App;

首先在html元素中定义id button_value，然后使用此id可以使用此道具ShouldCancelStart

获取点击事件

Answer 3

尝试在 SortableContainer 组件上使用 distance={1}。

检查此链接https://github.com/clauderic/react-sortable-hoc/issues/461

const ListItemContainer = SortableContainer((props) => {
  return <listItem />
})


<ListItemContainer               
              onSortEnd={this._orderingFolder}
              lockAxis='y'
              lockToContainerEdges={true}
              lockOffset='0%'
              distance={1}
              />

react-sortable-hoc：处理列表项上的click事件

3 个答案: