使用 react-sortable-hoc 的待办事项列表答案

【问题标题】：To do list using react-sortable-hoc使用 react-sortable-hoc 的待办事项列表
【发布时间】：2018-11-25 23:14:28
【问题描述】：

我正在使用可排序的拖放操作，效果很好。问题是我希望用户能够删除项目。代码附带的 SortableItem 组件不可访问，因此我无法传递将 index 作为参数的事件处理程序。这是我目前所拥有的：

const SortableItem = SortableElement(
 ({value}) =>
 <ul>{value}</ul>
);

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

export class BlocksContainer extends React.Component {
  constructor(props){
   super(props);
   this.state = {
  items: [],
 };
}
onSortEnd = ({oldIndex, newIndex}) => {
  this.setState({
    items: arrayMove(this.state.items, oldIndex, newIndex),
  });
};

addBlock = (block) =>{
  let arr = [...this.state.items, block];
  this.setState({items: arr})
}

removeBlock = (index) => {
let remove = [...this.state.items];
remove.filter(block => block === index);
this.setState({items:remove})
}

render() {
  return (<div><div onChange={console.log(this.state)} className="sortableContainer"><SortableList items={this.state.items} onSortEnd={this.onSortEnd} /></div>
  <h2>Blocks</h2>
  <button onClick={() => this.addBlock(<BannerImage remove={this.removeBlock} />)}>Banner Image</button>
  <button onClick={() => this.addBlock(<ShortTextCentred remove={this.removeBlock}/>)}>Short Text Centred</button>
  <h2>Layouts</h2>
  <hello />
         </div>
)
}
}

【问题讨论】：

标签： javascript reactjs drag-and-drop react-sortable-hoc

【解决方案1】：

由于您无法控制SortableItem 组件的事件，您可以将该组件包装在您可以控制的组件中。

例如，如果我想将点击处理程序添加到 SortableItem，我会将其添加到 div 包装器中：

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

【讨论】：

谢谢肖恩，这很有帮助。您知道使用事件处理程序删除项目的最佳方法是什么吗？可排序列表是在类之外定义的，所以我不确定如何更新状态。如果我不能使用 index.html，我也不确定在删除时如何定位特定项目。如果我使用 ID，那么 ID 必须在用户添加项目时动态生成。
您可以将索引发送到任何事件处理函数，如下所示：onClick={() => { this.someEventHandler(index); }} 然后在您的 someEventHandler 函数中，您可以通过从items 删除索引来删除它items.splice(index, 1);
它抛出一个错误'TypeError：无法读取未定义的属性'removeBlock'。因为 div 是在类之外定义的，所以它超出了事件处理程序的范围。我无法将事件处理程序移出类，因为那样它将无法更新状态。
事件处理程序和几乎所有代码都应该在类中