React sortable hoc - onClick how to change状态

React sortable hoc是一个用于实现可排序列表的高阶组件。它可以帮助我们在React应用中实现拖拽排序的功能。

在React中，我们可以使用React sortable hoc来实现拖拽排序的功能。首先，我们需要安装react-sortable-hoc库：

npm install react-sortable-hoc

然后，我们可以在需要使用拖拽排序功能的组件中引入sortableContainer、sortableElement和sortableHandle这三个组件：

import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';

const DragHandle = sortableHandle(() => <span>::</span>);

const SortableItem = sortableElement(({ value }) => (
  <li>
    <DragHandle />
    {value}
  </li>
));

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

在上面的代码中，我们定义了一个可拖拽排序的列表组件SortableList，其中每个列表项都包含一个拖拽手柄DragHandle。通过sortableContainer、sortableElement和sortableHandle，我们可以将列表项变为可拖拽的元素。

接下来，我们可以在组件中使用SortableList，并通过onClick事件来改变状态：

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

  handleClick = () => {
    // 改变状态的逻辑
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Change State</button>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
      </div>
    );
  }
}

在上面的代码中，我们定义了一个按钮，通过onClick事件来触发改变状态的逻辑。当点击按钮时，我们可以在handleClick方法中改变state中的items数组，从而改变列表的排序。

需要注意的是，我们还需要在SortableList组件中添加onSortEnd属性，用于处理排序结束后的逻辑。具体的排序逻辑可以根据实际需求进行自定义。

总结起来，React sortable hoc可以帮助我们实现拖拽排序的功能，通过onClick事件可以触发改变状态的逻辑，从而改变列表的排序。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。